- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 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.
I using http://www.notjustagird.com to create a 1500px wide website.
The html for the grid is pretty straight forward:
Masthead
Left Column
Content Area
Right Column
Footer
Is there a way to create a full width (page) background for the header “Masthead” & the footer via CSS ?
If I need to provide more info let me know.
You’ll need to wrap each of them in a separate wrapper (eg, ‘header-wrap’, ‘footer-wrap’) and apply a width of 100% to each of them, you’ll apply your background to that.
I created the following CSS:
.header-wrap {
background-size: cover;
background: orange;
}
I then tried the following html (with a closing div tag):
I tried wrapping both the footer & the “Masthead” individually and it didn’t work. I also tried wrapping the whole “Container” and it didn’t work either.
The “Container” CSS is as follows:
#container {width:1500px;position:relative; margin:auto;}
I’m not sure what I’m doing wrong.
HTML Code
Masthead
Left Column
Content Area
Right Column
Footer
CSS code
body { width: 1520px; width: auto; background: #e2e2e2; text-align: center;}
.container, .full {width: 1500px; margin: auto;}
.quarter { width:375px; float:left;}
.half {width: 750px; float:left; }
CMIIW
In the end I had to make a ton of changes…. too many to list, but it now works. Thanks for the help guys.