Can you use an image as a border option in CSS?

Discussion in 'CSS' started by NewComputer, May 30, 2005.

0
  1. #1
    I am trying to place a border around the body of a page. I would use 4 different images, each representing a different drop shadow. I have not read anywhere online how to do this. Anyone know how to do it?

    Here is the code...

    body {
    margin-left: auto;
    margin-right: auto;
    margin-top:15px;
    width: 779px;
    background-color: #41555F;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#fff;
    border-right: IMAGE HERE
    border-left: IMAGE HERE
    border-top: IMAGE HERE
    border-bottom: IMAGE HERE
    }
     
    NewComputer, May 30, 2005 IP
  2. tresman

    tresman Well-Known Member

    Messages:
    235
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    138
    #2
    No, you can not that way.

    To have a better idea you can check

    this article at ALA

    There are many ways to do it, but for now is not possible that easy.
     
    tresman, May 30, 2005 IP
    Colleen likes this.
  3. sjlogan88

    sjlogan88 Peon

    Messages:
    74
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    hey nice link been wondering which is the best way.
     
    sjlogan88, Sep 6, 2008 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If only they allowed that or multiple backgrounds for one element, maybe in CSS3 ...?
     
    wd_2k6, Sep 7, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    It is in CSS3 and also Safari lets multiple images per element.

    I don't think it's a great idea to set a width on the body itself-- I prefer sticking it on a wrapper div or something, and set a width on that.

    Bascially, though, you get only one image per element, thus the reason people sometimes make "sandbag" elements... elements who'd only reason for existance in the HTML is for holding images.
     
    Stomme poes, Sep 7, 2008 IP
  6. osiname

    osiname Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I was trying the same thing but recently, I found a way online to put divs next to each other using css float.
    Using that you can make divs look like so on a page

    <div>top</div>
    <div>left</div<div>middle</div<div>right</div>
    <div>bottom</div>

    Then all you have to do is replace top left middle etc with whatever you want - i used a broken down TV screen!
    Its not perfect but check it out on www dot osinova dot com slash sampleCode dot html click on html then css on the drop down menu and you will find it there :)

    Give me a second from the date/time of this post, im uploading it now...
     
    osiname, Aug 6, 2009 IP
  7. 1 FineLine

    1 FineLine Peon

    Messages:
    78
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I believe you could do this without images and use jQuery.

    I second the notion of not adding a width to the body tag. The only time I do that is if IE gets that ungodly horz. scrollbar.

    Add them to a wrapper div and not the body tag.
     
    1 FineLine, Aug 6, 2009 IP
  8. sms4promotion

    sms4promotion Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You can do it like this

    -moz-border-image:url(border.png) 30 30 round; /* Firefox */
    -webkit-border-image:url(border.png) 30 30 round; /* Safari */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    border-image:url(border.png) 30 30 round;
     
    sms4promotion, Aug 26, 2012 IP
  9. Jocaziggg

    Jocaziggg Greenhorn

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #9
    Yes............................
     
    Jocaziggg, Aug 31, 2012 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    I was about to say, yeah, you can do it with CSS3... as sms4promotion posted -- just beware it won't work in IE.

    though if all you are doing is shadows, you might want to not use images at all and just use box-shadow... BODY won't accept box-shadow (even inset) but an extra wrapping DIV set to 100% min-height can be used instead.

    I do that on this site of mine:
    http://www.ewiusb.com/

    
html,body {
	height:100%; // so inner div can get min-height.
	position:relative; // opera bugfix 
}

body:before { /* Opera min-height Fix */
	content:" ";
	height:100%;
	float:left;
	width:0;
	margin-top:-9999em;
}

#pageWrapper {
	overflow:hidden;
	min-height:100%;
	-moz-box-shadow:inset 0 -128px 128px 1em #000;
	-moz-box-shadow:inset 0 -128px 128px 1em #000;
	-webkit-box-shadow:inset 0 -128px 128px 1em #000;
	box-shadow:inset 0 -128px 128px 1em #000;
}
    Code (markup):
    then it's just
    
</head><body>
  <div id="pageWrapper">
    Page content here
  <!-- #pageWrapper --></div>
</body></html>
    Code (markup):
    Shadows whole way around outer edge, works in all modern browsers (even IE9).
     
    deathshadow, Aug 31, 2012 IP