CODEWITHSUNDEEP
htmlcssbrowserscrollbackground-image
bernte
bernte

Reputation: 1184

Background image doesn't repeat when browser window is smaller than content?

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 :D

Best regards, Bernte

Upvotes: 9

Views: 4010

Answers (6)

Gavo
Gavo

Reputation: 25

Add to "body" tag "width: 100%; display: table;"

body
{
    //..your_body_css_here...
    width: 100%;
    display: table;

}

Upvotes: 1

whonoes
whonoes

Reputation: 503

I am not allowed to comment, so I will add another answer here, maybe it helps someone.

Kevin Reid's solution worked for me, but only in conjuction with setting the width to 100%, so this is what I ended up with:

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

Upvotes: 3

sg3s
sg3s

Reputation: 9567

In your case you might just be able to drop the width and margin styles in that class:

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

The width:100% makes it so that the div takes on the width of the viewport which is not the same as the width of the document if you can scroll right or left.

If that is not the case we (all) will need your main layout html and css to come up with a proper solution.

Don't want to critisize the other answers but at this point they're probably all over complicated for what you actually want to achieve... (more description is welcome)

Upvotes: 1

kizu
kizu

Reputation: 43224

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/

Upvotes: 5

bratsche
bratsche

Reputation: 2674

Try using an :after pseudo element with your image in it.

#header-container:after {
    content: "";
    background:url(../img/bg.jpg) repeat-x 0 0px;
    width: 9999px;
    position: absolute;
}

Or something like that.

Upvotes: 1

Kevin Reid
Kevin Reid

Reputation: 43782

The reason it doesn't work is that in CSS, block boxes don't expand to surround their contents. Your #header-container has its ordinary width (no wider than the window), and does not extend extra to the right.

Try applying #header-container { display: table; }. Using the table layout model causes the box to be enlarged to fit the content, but if it does not need to be enlarged then it will still respect your width.

Upvotes: 3

Related Questions