bobblehead Posted October 21, 2012 Share Posted October 21, 2012 Hello, I'm trying to fix my background image so that is stays positioned around the content container when a web browser is resized like: http://digitaldudz.com. I'd love to know how to do this. When I try to accomplish this same task the background image moves when the web browser is moved and the container floats over the background image. Any help would be greatly appreciated. Thanks! Link to comment Share on other sites More sharing options...
Don E Posted October 21, 2012 Share Posted October 21, 2012 (edited) They used one image that's 1480 width and 65 height and positioned it center top and to repeat-y. This was applied to body element. body { background-image: url("images/BackGroundImage.jpg"); background-position: center top; background-repeat: repeat-y; .... } Then they had the centered content area(s) on top of that which equal about 950px width thus showing the mesh holes you see on the sides of the centered content area(s) which I have to say gives it a pretty cool effect. Edited October 21, 2012 by Don E Link to comment Share on other sites More sharing options...
bobblehead Posted October 22, 2012 Author Share Posted October 22, 2012 Thank you! Yah it is very cool but what I don't understand is how they got that background image to stay around the centered content area… it even stays in place when you stretch the browser to a bigger size. Link to comment Share on other sites More sharing options...
Don E Posted October 22, 2012 Share Posted October 22, 2012 Because it is an image of a certain width and height and it's background-position is center top. So for the page, actually the body element, it's saying basically to center the image in the body element and place it at the top of the body element. Then repeat it y, which is to repeat it vertically. The content area(s) are set in width using pixels. So when stretch the browser to a bigger size, this too stays in place with the image behind it. This is the image they used. If you notice the black space in the middle, that's where they place the content to sit. To cover that space takes about 950px width. When they created the image, they knew what they wanted the width of the image to be along with the content areas width as well. Link to comment Share on other sites More sharing options...
bobblehead Posted October 22, 2012 Author Share Posted October 22, 2012 Ah okay that makes sense. I've downloaded the image from above and put it on the site I'm working on I also adjusted the code to the above example but if you visit my site http://www.sfntv.com you'll see that that when you stretch the browser window the background moves but the content area doesn't move along with the background image. I must be missing something! Thank you again for the help… I really appreciate it! Link to comment Share on other sites More sharing options...
Don E Posted October 22, 2012 Share Posted October 22, 2012 Welcome.Try adding the following to the style sheet called: style.css body { background-image: url("http://www.sfntv.com/BackGroundImage.jpg"); background-repeat: repeat-y; padding-bottom: 10px; background-position: center top;} Link to comment Share on other sites More sharing options...
bobblehead Posted October 22, 2012 Author Share Posted October 22, 2012 OMG! You totally rocked it! Thank you so so much! That did the trick! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now