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; }