0

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.

E. Shcherbo
  • 1,128
  • 8
  • 15
  • 1
    _"I can't understand why"_ - because the default background-position is center, and your element - probably located in the top left corner, in a very basic example? - simply doesn't reach there. Decrease the size of your browser window until this element almost fills it, and you should see the image coming up at some point. (You can add a background-color or outline to your div element, to more clearly see where it is in relation to the browser window and background image. Or apply the background image to the `html` element instead, then you will immediately see where it actually is ...) – CBroe Jul 25 '18 at 21:04
  • Yes, I got it. Thank you very much! – E. Shcherbo Jul 25 '18 at 21:22

1 Answers1

1

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.

Tom Savage
  • 76
  • 5