PDA

View Full Version : Adding border image to div



mkymn8828
03-16-2015, 05:11 PM
Hey Guys, So I'm trying to add a simple border around my div but just isn't showing up. Hopefully its something simple I am missing. Here's what I have:

#big_box {

width: 690px;
height: 483px;
position:relative;
float: left;
/* Curves div Corners */
border-radius: 1em;
margin: 2em 0 2em 1em;

/* Give div Border */
border-style: solid;
border-width: 0px;
z-index:99;
border-image: url(images/bbcollage/treeoflife.png);
}

Here's my site for reference (look on my portfolio page): http://mast.salemstate.edu/itc18244/Portfolio/

Excavator
03-16-2015, 05:47 PM
Hello mkymn8828,
That's not a border image, that's an entire background with a border.
Look at it like this -


#big_box {
background-image: url("http://www.codingforums.com/images/bbcollage/border.png");
border-radius: 1em;
border-style: solid;
border-width: 0;
float: left;
height: 483px;
margin: 2em 0 2em 1em;
position: relative;
width: 690px;
z-index: 99;
}


See Border Image here (https://css-tricks.com/understanding-border-image/).

mkymn8828
03-16-2015, 07:45 PM
Gotcha there, but I would want the image to sit on the border of the div, not within the div. Or could I overflow the image outside the div somehow?

Excavator
03-16-2015, 09:23 PM
Gotcha there, but I would want the image to sit on the border of the div, not within the div. Or could I overflow the image outside the div somehow?

If you use border.png as a background image of #big, you just need to adjust the size of nested .items and welcome.png to fit inside the background.

mkymn8828
03-17-2015, 01:40 PM
I think I'll just make a separate div all together for that image, this border property is a head ache, but thank you for your advice!