CODEWITHSUNDEEP
cssbackground
mixerowsky
mixerowsky

Reputation: 217

how to prevent cutting the background?

I set background image in #section-content, background is repeat-x, and background color in #section-footer. Problem is that backgrounds are cut by the amount of space that is first seen.

Is there any way to fix this?

There is image with problem, you can see that footer background color is cut off when is resolution or window small and I scroll right...

Problem image

Upvotes: 0

Views: 97

Answers (2)

Dipak
Dipak

Reputation: 12190

You need to define min-width to the footer. Consider your main page wrapper has width: 980px; then assign min-width: 980px; to the footer element. When you resize the browser window, your footer knows that he has to repeat the background to the specified min-width even when your page gets horizontal scroll.

Upvotes: 1

mixerowsky
mixerowsky

Reputation: 217

my html structure looks like this

<div id="page">
    <div id="section-header">
    ...
    </div>
    <div id="section-content">
    ...
    </div>
    <div id="section-footer">
    ...
    </div>
</div>

so I add to css

#page {
    margin: auto;
    overflow: hidden;
    min-width: 1180px; /* it fits on my site */
}

and problem is solved...

Upvotes: 0

Related Questions