- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
So I want to use three background images for the header, content area, and footer. I am just struggling to position them in the correct order. Should I be using the background-position or background size selectors? Or something else? I was assuming I could do all of this work in my body tag or do I need to use separate divs in or outside my wrapper?
My wrapper is always centered but, I wanted all three of bg images to repeat horizontally across the full screen of the browser for better aesthetics. My css is below.
/*************************
Styles
*************************/
body {
background-image:url(‘../img/index/subtlenet2.png’),
url(‘../img/index/paper_2.png’),
url(‘../img/index/low_contrast_linen.png’);
}
#wrapper {
width: 850px;
margin: 10px auto;
}
nav {
}
footer {
bottom-margin:0;
width:100%;
text-align: center;
}
.content {
margin-top: 20px;
color: white;
}
You have to add wrappers to each of the sections (top, middle & bottom) and then add divs inside each of those for your content.
Here’s an example with just colours: http://codepen.io/Paulie-D/pen/cjzxw
Just substitute in your images.
thanks paulie, that was really helpful!