Home/ Questions/Q 8927643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T08:15:55+00:00

I was given this design that I’m trying to apply to my website .

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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%;
}
    • 0