- This topic is empty.
-
AuthorPosts
-
May 24, 2011 at 3:59 pm #32865sheepysheep60Participant
Hello.
I’d like a background image to repeat across the whole screen for a few sections of my site. I’d like the content to have a fixed width though. Normally I would have a nice wrapper class around the whole site, like this:
Header content
Content... content?!
But normally the .wrapper would have a width of – say – 960px, which means my background images for the header, content and footer won’t stretch the whole screen. This leads me to the rather messy markup:
Header content
Content .. content?!
now the background images of header, .content and footer will stretch 100% of the whole page. The content of each part can be 960px.
Now my question:
Is there any neater way of doing this so I can keep my markup like I wrote first?!Thanks guys! Dave.
May 24, 2011 at 4:02 pm #75441TheDocMemberDoes your body currently have a background attached to it? If not, put it on there.
May 24, 2011 at 4:04 pm #75442sheepysheep60ParticipantHiya, thanks for the reply –
Yeah, that would be fine if I just wanted to have one background image, but I’d like to have a background image for the header, a different one for the .content, and a different one for the footer! Dynamic sizes etc.
May 24, 2011 at 4:55 pm #75446TheDocMemberAh yes, sorry – didn’t read it close enough! In that case you’ll have to get a little messy with the code and give a wrapper to each section to create the 100% width.
May 25, 2011 at 9:54 am #75309lajinMemberYou can use background properties of body and html tags to get the backgrounds (top and bottom aligned). Not sure if it is going to work for you.
May 27, 2011 at 7:24 am #75182QbitMemberHi,
I think this is a clasic layout, as seen on many pages. If your content is centered on the page (wrapper) and you just want to extend the header to the left and to the right, just add a giant neagtive margin to both sides and the same amount as a positive padding.
body {
overfow-x: hidden;
}
header {
margin: 0 -9999px;
padding: 0 9999px;
}
I’m not sure if this is the “best” way of doing it, but it always did the trick for me.
Greetz.
May 27, 2011 at 4:40 pm #75160QbitMemberYes, I thougt I’ve seen it here but I couldn’t find it. Chris likes to do things with :before and :after nowadays. :) Maybe I should adopt some of his techniques.
But beware the browser support!
November 18, 2011 at 9:15 am #90911bluceMember, -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.