image doesn't stick to bottom of page
Question
I was given this design that I'm trying to apply to my website . Notice that the <html> element has a background image (hands in the air), that sticks to the bottom of the page.
However, when I migrated the css files over to my application, for some reason this image appears halfway down the page instead. I've checked the relevant CSS and in both cases it's:
html {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("../../img/bg.svg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
outline: 0 none !important;
}
so why does the image stick to the bottom of the page here , but appear halfway down the page here .
4 answers
solution1
4 2012-12-01 17:16:59
You have height: 100% set for your html and body . This is normally done to able to have full-height elements. But in this case, this is proving to be the cause of the issue. Removing this it fix the issue.
Check in Firebug or Chrome Inspector and you will see some thing like:
html, body {
height: 100%;
}
Remove it. OR Override it from your style sheet.
solution2
3 2012-12-01 17:15:09
It's not working on the 2nd site due to the body { height: 100% } styling.
static/bundle-bundle_responsive_head.css:
html, body {
height: 100%;
}
solution3
2 ACCPTED 2012-12-01 17:14:38
Looks like the computed height of the 1st link is set such that the image is at the bottom, whereas for the link where the image appears part way down the computed height is much lower. height: 170px; compared to height: 2006px;
I'm not sure what's setting the height for you, but sorting that out will solve your image problem
Edit: Actually it seems to be in this rule which is only on one of those sites:
media="screen, projection"
html, body {
height: 100%;
}
solution4
2 2012-12-01 17:16:19
It looks like it's actually the background image on the body tag that is not sticking to the bottom. Turning off the height: 100% body rule in bundle-bundle-responsive-head.css fixes it, though I'm not sure how that will affect other things on the site.
I found this by using the DOM inspector in Chrome and turning on/off the rules for the various elements to see what effect they would have.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.