Home/ Questions/Q 6606923
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T19:26:50+00:00

I have a header-container with a background image, like so: #header-container { background:url(../img/bg.jpg) repeat-x

  • 0

I have a header-container with a background image, like so:

#header-container
{
background:url(../img/bg.jpg) repeat-x 0 0px;
margin:0px auto;
width:100%;
text-align:center;
}

When my browser is in fullscreen (Firefox, Opera, IE), I get the following result (everything is fine):

FULLSCREEN BROWSER

When I resize the browser to a smaller window i got this (so far so well):

RESIZE TO SMALLER WINDOW

and when i scroll now to the right the background image doesn’t repeat.

SCROLLING ERROR

Is there a way to fix it so that the image will repeat when I scroll to the right?
I know it would work when i move the background image into the body of the CSS, but I have many images for different divs, so I’m not able to do it with the body background image.

Hope somebody can give me a hint 😀

Best regards,
Bernte

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As animuson mentioned in a comment, it’s more likely if you have a set min-width or just some content that expands the page over it’s available borders.

    There is an example of the second one: http://jsfiddle.net/kizu/3hLjv/

    To fix the second one, you can make the wrapper to have width set by it’s children, for example, you can use inline-block for this: http://jsfiddle.net/kizu/3hLjv/1/, if you have no wrapper, you can set this to BODY: http://jsfiddle.net/kizu/3hLjv/2/

    And if you have some blocks with widths or min-widths greater than header’s, just add the same min-width to header: http://jsfiddle.net/kizu/3hLjv/3/

    • 0