4 replies [Last post]
kenerly
kenerly's picture
Offline
newbie
Last seen: 8 years 7 weeks ago
Timezone: GMT-4
Joined: 2007-02-23
Posts: 6
Points: 5

I'm working on a site, trying to get the background image to sit at the bottom of the page. Viewed on my laptop the image is on the bottom (screen size?). When viewed on pc with 22 inch monitor, the image is near the top. Here is the test site. http://kenerly.com/test/

Any ideas?

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 6 years 30 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

the background image size & monitor size

both matches on your laptop, that is why it is showing at the bottom - just by doing the background position bottom will not help - the div itself aligned to the top. It does not make any sense to align the content of the page to the bottom, but if you're to do that - you can use absolute positioning here...do you know that logic?

kenerly
kenerly's picture
Offline
newbie
Last seen: 8 years 7 weeks ago
Timezone: GMT-4
Joined: 2007-02-23
Posts: 6
Points: 5

Thanks surajnaikin I went

Thanks surajnaikin

I went with the absolute positioning.

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 6 years 30 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

still some issues

There is still some issue with this approach, on a bigger resolution. Try Ctrl + minus in browser to reproduce this issue.
bigger-resolution-issue.png

Instead try one of the technics mentioned here
http://css-tricks.com/perfect-full-page-background-image/

surajnaikin
surajnaikin's picture
Offline
Enthusiast
india
Last seen: 6 years 30 weeks ago
india
Timezone: GMT+5.5
Joined: 2007-06-09
Posts: 111
Points: 72

another issue with low height browser viewport

It is understandable that you want the hut to be at the bottom of the mountain, set a min height so that it generates a scroll on lower resolution.

oneother-problem.png