CODEWITHSUNDEEP
csscss-positionresponsive-design
JCHASE11
JCHASE11

Reputation: 3941

Absolutely positioning background in responsive layout

I am designing a responsive layout and have positioned a grungy png overlay on top of background using the following CSS:

#bg{
   background:url(images/top1.png) no-repeat; 
   position:absolute; 
   width:1423px; 
   height:350px; 
   top:0; 
   left:50%; 
   margin-left: -711px;
}

This way, the image is always centered regardless of the page width. My problem occurs when the browser window is reduced to a width smaller than the background image for the #bg overlay. A horizontal scrollbar appears and the background extends far to the right (especially when the browser is very small).

You can see a DEMO of this here: http://pixelcakecreative.com/cimlife/responsive2/

As you can see a horizontal scrollbar appears, I would like browser window to shrink and not retain the full width of the image! Any ideas?

Upvotes: 2

Views: 2042

Answers (2)

Melros
Melros

Reputation: 1213

Just had a quick look at your code. Check out your nav, this one produces the scrollbar.

Have a look on how to enable developer tools in your browser to inspect your page. It's a good way to check on your elements attributes.

Here's an good introduction for Chrome: Link

And for Safari: Link

Upvotes: 0

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34152

try this css code:

      #bg{
 background:url(images/top1.png) no-repeat center;
 position:absolute;
 width:100%;
 height:350px;
 top:0px;
 left:0px;
 }

Upvotes: 1

Related Questions