how to put 2 backgrounds on one page

**anonperson** · 04-18-2012, 06:32 PM

I need one background non repeating at the top of the page....

and than another background repeating vertically however long the page gets.......

anyone know the code for that?

**auntnini** · 04-18-2012, 11:59 PM

http://www.css3.info/preview/multiple-backgrounds/

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.
:
#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

Alternatively. you could assign one background-image to HTML element and another to BODY element -- making the BODY background transparent so HTML background can show.

**anonperson** · 04-19-2012, 06:48 AM

I dont need transparent backgrounds..

that doesnt work.. it doesnt even show any background images at all.

Code:

<style type="text/css">


html, body {
border:0; 
margin: 0; 
padding: 0; 
background-color:#131212;


}

.example1 {

background-image: url('images/bodybg.jpg'), url('images/bg.jpg');
background-position: center top no-repeat;
background-repeat: repeat-y center;
background-color:#131212;
} 
      
</style>

</head>

<div class="example1">



</html>

**itivae** · 04-20-2012, 12:07 AM

I would make a <div> at the top with the image you want. Then have a wrapper around the rest of the content i.e.

Code:

<body...or div class="wrapper">
<div class="someclass">Your content at the top</div>
<div class="bgwrapper">

....

page content
....

</div>

css for divs

.someclass {
background-image: url("url/toyour/img");
}
.bgwrapper {
background-image: url("your/other/image");
background-repeat: repeat;
}

might work for you... if you have an active version post it up.

**anonperson** · 04-20-2012, 12:44 PM

that doesnt work at all.... it just shows a real thin distorted image strip at the top of the page.. with everything else just blank white below...

Code:

html, body {
border:0; 
margin: 0; 
padding: 0; 

}


.someclass {
background-color:#131212;
background: url('images/bodybg.jpg');
background-position:center top;
background-repeat:no-repeat; 
}
.bgwrapper {
background-image:  url('images/bg.jpg');
background-repeat: repeat-y center;
}


</style>  
  


<body>

<div class="someclass">Your content at the top</div>
<div class="bgwrapper">

....

page content
....

</div>


  </body>
</html>

**itivae** · 04-22-2012, 01:09 AM

Got a url? It makes troubleshooting easier than guessing.

Thread: how to put 2 backgrounds on one page

Thread Tools

Search Thread

how to put 2 backgrounds on one page

Css3

Bookmarks

Bookmarks

Posting Permissions