Search code examples
cssbackground-attachment

background-attachment fixed and container width


I'm sorry if my question is stupid, but I can't understand what "a picture is fixed with regard to the viewport" means and how it's connected to the following thing:

Suppose that we have a html element <div class="background"></div> and some styles

.background {
    background: url(some-image.jpg) no-repeat fixed;
    height: 500px;
    width: 150px; /* suppose that this width is less than a width of the picture */
}

In this case, the background image does not appear. I can't understand why and how it's related to an idea about viewport.


Solution

  • Fixed background images use the entire "viewport" or window to contain the image. It is possible your image is contained in such a way that the image is not reaching the area you have setup to show it. I bet if you scaled your browser window down very thin, you would be able to see your image. This is because background images using "fixed" are fixed to the entire viewport, not the element they are defined in. However, they are only viewable in the area they are defined in. Let me know if this helps or if you need further explanation.