Let's say an image of 1600x1000 on the site is 500 pixels high and its display is not full, how can you move it up so that the bottom part is visible?

  • If you are satisfied with some answer, then mark it with a decision! - user33274

3 answers 3

background-position: 50% 100%;

The first value is the location of the background image along the x axis, 50% - it will be centered, the second value - the location along the y axis, 100% - will be from the bottom edge of the element.

    For example: I took a large image and here it is a block as required 500px in width and we need to shift the background to the lower right edge, this is done like this:

     .positionir{ width:500px; height:400px; background:url(https://cdn.wallaps.com/wallpapers/150000/144909.jpg); background-position:bottom right; } 
     <div class="positionir"></div>

      If you want the image to fit completely, then you need to use background-size: contain , but usually use background-size: cover , the image will be slightly cropped, but it will take up the entire area of ​​the container.

      Here everything is described in detail and clearly shown.