Jump to content

Keeping Background Image Around Container


Recommended Posts

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 post
Share on other sites

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 by Don E
Link to post
Share on other sites

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. post-69628-0-71036700-1350881037_thumb.jpg

Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...