Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Sinikka Li
Sinikka Li
5,048 Points

multiple full size background images

hey I'm trying to create a website with multiple full size background images, like one fullsize bg image, then I scroll down and the second one appears... Unfortunately it doesn't work how I did it, my two images are getting stacked on each other.

This is my css code for the div container:

fullscreen-bg {

background: url('C:/Users/Sinikka/Pictures/website%20pics/114H.jpg') no-repeat center top, url('C:/Users/Sinikka/Pictures/website%20pics/18H.jpg')no-repeat center bottom;
position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; min-height: 1200px; background-size: cover, cover; background-position: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: -1; overflow: visible;

I hope someone has an idea :) Cheers

2 Answers

Antonis Martalis
Antonis Martalis
1,506 Points

Here is something that might help send me more info and il fix it!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Put your own title here!</title>
<style>
body{
    width:1190px;
    height:2000px;

    }

.image1{
    display:block;
    width:100%;
    height:50%;
    background-image:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQrYgbDs5Ti_Bzqjw7RBALW9wLJHDnTwA0_OSx6O2-fqOA1WWVsRTrrddk)

    }
.image2{
    width:100%;
    height:50%;
    background-image:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSSOjwW6z1QNCznj-VW1sAYJjp4f39zcgsrof5gCyIg2Atg-sxCJQ)

    }



</style>



</head>

<body>
<div class="image1" ></div>
<div class="image2"></div>
</body>
</html>
Sinikka Li
Sinikka Li
5,048 Points

hey, thanks for your answer! So now I made to div containers

<body> <div class="image1"></div> <div class="image2"></div> </body>

and my css code looks like this: .image1 { background: url('C:/Users/Sinikka/Pictures/website%20pics/114H.jpg') no-repeat center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; min-height: 835px; background-size: cover; background-position: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: -1;
}

.image2 { background: url('C:/Users/Sinikka/Pictures/website%20pics/6H.jpg') no-repeat center; background-size: cover; background-attachment: fixed; }

I found this code on a website that I like and tried to use it... the first background image is working but then the second one gets put behind the first one and not below...

Antonis Martalis
Antonis Martalis
1,506 Points 
.image1 {
    background: url('C:/Users/Sinikka/Pictures/website%20pics/114H.jpg') no-repeat center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-height: 835px;
    background-size: cover;
    background-position: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: -1;
}
.image2 {
    background: url('C:/Users/Sinikka/Pictures/website%20pics/6H.jpg') no-repeat center;
    position: absolute;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;<!--Play here to resize second background to be big or small -->
    height: 100%;;<!--Play here to resize second background up or down -->
    min-height: 100%;
    min-height: 835px;
    top:400px;<!--Play here to move second background up or down -->
    left: 0;

}
Sinikka Li
Sinikka Li
5,048 Points
Sinikka Li
Sinikka Li
5,048 Points

thanks a lot, it works perfectly :)

Antonis Martalis
Antonis Martalis
1,506 Points

dont forget to choose best answer so it can close the post