1

The full image is not displayed properly, the bottom of the image is missing, how can I display the full image on screen? (dimensions: 5904 * 4000 px)

I tried with object fit but its not working:

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 100vh;
  background: url("adult-blur.jpg") center center no-repeat;
  background-size: cover;
  overflow: hidden;
  object-fit: cover;
  object-position: bottom top;
}

I also shared a video of this problem in facebook: here

finnmglas
  • 1,626
  • 4
  • 22
  • 37
Sourav Mitra
  • 23
  • 4
  • Welcome to StackOverflow. Please review [How do I ask a good question](https://stackoverflow.com/help/how-to-ask) and take a look at how to include the relevant code in a [minimal, *reproducible* example](https://stackoverflow.com/help/minimal-reproducible-example) so that we can see the HTML and other information we need to see the problem. Also, can you include an image instead of a video please? – FluffyKitten Jul 11 '20 at 17:05

2 Answers2

1

You cannot have both:

  1. The image show fully
  2. Have the image cover the entire background

Remember that the image is of a fixed ratio and most screens will have a different ratio than your image not to mention differences in the actual viewable area (viewport) because of the browser toolbars and OS toolbars.

Your options are:

  1. Have the image always be full-width using width:100%. This risks having a part of the image cut off at that bottom if it is taller than the viewport or having some white-space at the bottom if the image is shorter than the viewport.
  2. Have the image always be full-height using height: 100%. This risks having a part of the image cut off at the right side if it wider than the viewport or some whitespace if it is not as wide as the viewport.
  3. Use backgorund-repeat to have the image repeated vertically or horizontally to cover any whitespace.

Most other options you can find in CSS do a combination of the above options, with some additions like centering the image where there is white-space.

Most designers select the images with this in mind, choosing images that don't have any important details near the edges, and thus still look good if a small section is cut off at any end.

fignet
  • 305
  • 2
  • 7
0

Check out this code:

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <style>
            #body-container {
                width: 100%;
                height: 100vh;
                background: url("j.jpg") center center no-repeat;
                background-size: cover;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <div id="body-container">
            <!-- Place your document contents here -->          
        </div>
    <body>
</html>

Here we used bootstrap-4. Put all contents of document body inside div container. In styles, background-size is used to make our image 100% in width n height. If it image stretches absurdly, you can also try background-size: cover. Finally, overflow-y property is used to make our div scrolls vertically

gpl
  • 1,380
  • 2
  • 8
  • 24