2 replies [Last post]
pierop
pierop's picture
Offline
newbie
Last seen: 2 years 39 weeks ago
Timezone: GMT+2
Joined: 2011-10-23
Posts: 2
Points: 3

I have an absolutely positioned div at the top of the window with a background image which should span all the way horizontally.
(The reason for absolute positioning is that it is a strip with something both under and over it, I'm not sure if I could have done differently)

If the browser window is too narrow and horizontal scroll bar appears, if I scroll horizontally the background image disappears where it was "outside" the original window

Now, I understand why: it is due to 100% width of the div, but how can I get around this? If I remove it, nothing is displayed as the div is empty

CSS:

#headbar	{position:absolute;
			top:0px;
			height:104px;
			width:100%;
			margin-left:auto;
			margin-right:auto;
			background-image:url('../images/headbar.png');
			background-repeat:repeat-x;
			background-position:center; 
			z-index:1;}

HTML:

<body>
 
<div id="headbar">
</div>
 
all the rest
 
</body>

pierop
pierop's picture
Offline
newbie
Last seen: 2 years 39 weeks ago
Timezone: GMT+2
Joined: 2011-10-23
Posts: 2
Points: 3

By the way, the online page

By the way, the online page is here: www.dance-factory.it

Sereby
Offline
newbie
Last seen: 2 years 30 weeks ago
Timezone: GMT-5
Joined: 2011-12-28
Posts: 1
Points: 1

I can try to point you in the

I can try to point you in the right direction. Instead of using width: 100% for elements that have the backgrounds, specify a min-width (for example: min-width: 960px).

References:

Backgrounds Disappear On Horizontal Scroll

Disappearing Background Graphic