Forum Moderators: not2easy

Message Too Old, No Replies

two background

         

Lolalola

2:51 pm on Feb 7, 2010 (gmt 0)



Hi,
Is it possible to use two backgrounds in one div?
One of the background picture would be bottom-up corner, and another drift all div...
On both the overall picture will be posted on the text. Thus, pictures may not be on a different div

rocknbil

6:42 pm on Feb 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No it's not, that I know of. One way to do it is nest elements, using transparent: on the "upper" ones. For "left" and "right" borders, something like

#outer { width: 200px; height:400px; background: url(left-border.gif) top left repeat-y; }
#inner { width: 200px; height:400px; background: transparent url(right-border top right repeat-y; }

<div id="outer">
<div id="inner">
<p>Your content</p>
</div>
</div>

Sometimes this will work with just the two if you have corners in the images, but you wouldn't repeat, and it has to be a fixed size. If you want a stretchable column, you'll have to slide a div in top and bottom, and clear the bottom one. If it's a single div with the full top/bottom cap, just one, if it's just the corners, you'll have to have a bottom and top border element with the corner elements floated left and right, something like


<div id="outer">
<div id="inner">
<div id="top-row"><div id="tl"></div><div id="tr"></div></div>
<p>Your content</p>
</div>
<div class="clear-div"></div>
<div id="bot-row"><div id="bl"></div><div id="br"></div></div>
</div>


Which is starting to approach a serious case of div-itis . . . but sometimes all you can do is all you can do.