CSS Forum

**vultren** · 12-30-2011, 05:41 AM

Hi All,

Usually I don't run into problems, but I absolutely cannot figure this out. I haven't actually ever run into this styling issue...

Here is an illustration of what I want:

My issue is the background image. I cannot get it to stay static on at that position when a user changes the screen size small or bigger.

It needs to stay at the bottom left pulled out a bit away from the container.

Here is the code:

Code:

<body>
<div class="bg">
	<div class="container">
        
        container contents
        
        
	<!--end container--></div>
    
    <div class="footerbg">
	<div class="footer_container">

footer contents

    <!--end footer_container--></div>
<!--end footerbg--></div>


<!--end bg--></div>
</body>

Code:

body
{
	background-color:#FFF;
	background-image:url(img/bg.jpg);
	background-repeat:repeat-x;
	height:773px;
	font-family:Arial, Helvetica, sans-serif;
	
}


.bg
{	background-image:url(img/globe.png);
	background-repeat:no-repeat;
	overflow:hidden;
	background-position:bottom left;
	background-attachment:fixed;

	
}

.container
{
	margin:0 auto;
	height:100%;
	width:930px;
	
}

I am also using 2 background images, that's why I had to make the .bg. I know there is CSS3 for this, but I can't even figure this out. What I marked up is completely wrong I know

Any help would be greatly appreciated!

**chrishirst** · 12-30-2011, 07:08 AM

Remove the "fixed" value.

It works in a similar way that position: fixed works, where "fixed" is actually relative to the viewport.

**vultren** · 10:50 PM

Quote:

Originally Posted by chrishirst

Remove the "fixed" value.

It works in a similar way that position: fixed works, where "fixed" is actually relative to the viewport.

Ok just tried it. Doesn't work how I wasn't it to.

Lets say you make the browser window smaller... the background just stays the same and doesn't move with the container... the overflow hidden also removes the scrolling box for very small window browsers which is an issue of it's own also.

It needs to act like one very large webpage but have a hidden value for the background if a screen is smaller in size. Imagine background-position:center bottom; - see how that scales and moves with the site when resized? I need that but justified a bit more over to the right like in the picture above.

**vultren** · 12-30-2011, 10:58 PM

Edit: I fixed it with:
background-position:center bottom;
and made the image a lot longer on the x axis. Is this the correct way of doing this?

The overflow hidden is kind of messing up the scroll bar when the browser goes less then 930px (my set width for the container).

**lizciz** · 12-31-2011, 04:41 AM

There is seldomly a "correct" way of doing things. Since you got it to work, it can be concidered correct.

When designing websites you can't make everyone happy. The issue of screen resolution and window resizing is just like using different OS or browsers, you can't make it perfect in all cases. With a width of 930px your website will probably look the way you meant for it to look for 99% of your users, and the remaining 1% who have a smaller screen resolution is likely aware and already used to that they'll need to scroll horizontally on some pages.

**vultren** · 12-31-2011, 03:02 PM

Quote:

Originally Posted by lizciz

There is seldomly a "correct" way of doing things. Since you got it to work, it can be concidered correct.

When designing websites you can't make everyone happy. The issue of screen resolution and window resizing is just like using different OS or browsers, you can't make it perfect in all cases. With a width of 930px your website will probably look the way you meant for it to look for 99% of your users, and the remaining 1% who have a smaller screen resolution is likely aware and already used to that they'll need to scroll horizontally on some pages.

Exactly what I figured. You are definitely correct. Thanks for the input!