CODEWITHSUNDEEP
htmlcss
Alqin
Alqin

Reputation: 1305

How to use a background image larger then the visible area

I have a bg image width 1300px.

I create the #header container with the width: 100% background-image('image-bg') center; The content has 960px; margin: 0 auto; so that will always be in the center.

#header is in a #page container that has also 100% background-image('image-bg-border') center; just to create a nice border

But now when I resize the browser on small width values the #page, body, html is smaller then the content within #header or other element that has 960px; margin: 0 auto.

What to do that the #page to be at least the same width as #header when you resize it on small width? Temp link: removed

EDIT: Look a the div#page while you resize the browser on the width on smaller values. The #header at one pint gets larger then #page, to see this scroll to the right on horizontal.

Upvotes: 1

Views: 442

Answers (1)

Mr Lister
Mr Lister

Reputation: 46559

The div#page does not have a width set, so it defaults to the width of the window. The header#branding inside it does have a min-width of 960px, therefore it will extend outside of the div#page area.

Do you want to have the div#page to have a min-width of 960 px, or do you want to try to restrict the whole page to the window width?

Upvotes: 0

Related Questions