CODEWITHSUNDEEP
htmlcss
Ferret
Ferret

Reputation: 223

Separate background images at top and bottom of site?

I'd like to have separate background images on the top and bottom of my site but can't quite seem to nail it. I would like the images to stay at the absolute top and bottom of the page.Below is a shot of the site mockup, and a shot of the backgrounds on their own with dimensions.

The mockup doesn't show it, but there will be text links and copyright info at the bottom. You can find my failed attempt at coding at www[dot]dev[dot]arbitersoflight[dot]net

Mockup img683[dot]imageshack[dot]us/img683/4502/mocky[dot]jpg

Backgrounds img233[dot]imageshack[dot]us/img233/1293/94210454[dot]jpg

Note: The backgrounds are 1200x400 each.

EDIT: At this point I can get the two images to show up without fail, the problem is getting the bottom image to stick to the absolute bottom of the browser window. It seems that it is currently at a fixed position. Below is my CSS and HTML..

UPDATE (Solved): I finally solved this by reworking my code based on this guide: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ Thanks for all of the suggestions everybody.

Upvotes: 0

Views: 5378

Answers (4)

Vlad
Vlad

Reputation: 324

You could use the second image as the body background, set a color too, and the first image as the container's background. Or vice-versa, but remember to align the background, and if you switch, mind the container's height.

The body and html background (like the suggestions from zzzzBov and nemophrost) don't work in my Firefox...

body {
    background: #DDD url('2.png') no-repeat center bottom;
}
.container {
    background: url('1.png') no-repeat center top;
}

Upvotes: 1

zzzzBov
zzzzBov

Reputation: 179096

It sounds like you want:

html
{
  background: url(...) no-repeat top; /* see the background-position property */
}

body
{
  background: url(...) no-repeat bottom;
}

you may want to switch one or both to use repeat-x, and make sure you set a suitable background color to match the color on the images.

Upvotes: 0

nemophrost
nemophrost

Reputation: 567

Another thing you can do is set a background image on the body and on html.

body {
    background: url(...);
}

html {
    background: url(...);
}

You can see jqueryui.com for an example of this.

Upvotes: 1

Sander
Sander

Reputation: 1274

What you can do:

The menu is a div with an own background to fit the upper area. Then apply the background with the bottom part to the body or content/page container that you are using.

Upvotes: 0

Related Questions