how to put 2 backgrounds on one page [Archive]

View Full Version : 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.

<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.

<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...

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.