image - HTML and CSS3 - Two Background Divs -
i have been having trouble website @ moment. i'm trying 2 divs sit on top of each other create effect , background if jagged off. example here: https://docs.google.com/drawings/d/1idqwkdkbs-xxlrvzlf8bh5k_b6iizmlmnjdki8cgzsc/edit?usp=sharing . problem can't work. shows 1 of images @ time. heres code:
<div style="background-image:url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/washedwalltexture2.jpg'); background-repeat:repeat-x; clear:both;"> <p><!--emptyspace--></p> </div> <div style="background-image:url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/washedwalltexture1.jpg'); background-repeat:repeat; clear:both"> <!--content here--> </div>
thanks time.
your code works expected. divs don't stack on top of each other default. display: block
, , stay within document flow. means second div sit below first div, , first paragraph. giving background image isn't enough take out of flow; need change positioning. also, please don't use inline styles; kitten dies every time do.
i'd this.
html:
<div class="top_bg"></div> <!--content here-->
css:
.body { background-image: url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/washedwalltexture1.jpg'); } .top_bg { position: absolute; top: 0; left: 0; right: 0; height: 14px; background: #fff url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/washedwalltexture2.jpg') repeat-x; }
Comments
Post a Comment