CSS3 Background-Size: Cover Doesn't Make Image Cover Vertically

CSS3 background-size: cover doesn't make image cover vertically

Are you interested in only using a CSS background image? This can be done by loading an image and constraining it with the CSS.

Would either of these examples work?

HTML

<body id="page-body">
<img class="bg" src="images/bodyBackground1.jpg">
<div class="wrapper">

</div>
</body>

CSS

html {
        background: url(images/bodyBackground1.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

body {
    background:#fff;
    margin: 0;
    padding: 0;
    overflow:hidden;
}

html, body {
    height: 100%;
}

img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;

        /* Set up proportionate scaling */
        width: 100%;
        height: auto;

        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Or this one? This one loads images from a database into an array and loads them at random, but you might be able to glean some info from this:

PHP load function

<?php
    $bg_images = array(
        0 => 'comp1.png',
        1 => 'comp2.png',
        2 => 'comp3.png',
        ....
    );
    $image = $bg_images[ rand(0,(count($bg_images)-1)) ];
    $showBG = "<img class=\"source-image\" src=\"images/bg/" . $image . "\"/>";
?>

HTML

...
<body>
<?php echo $showBG; ?>
<div id="wrapper">
...

CSS

html, body {
    margin:0;
    height:100%;
}

img.source-image {
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    min-width:1024px;
}

These options should fill up the browser window according to the height and width.

CSS3 background image doesn't vertically stretch

Setting the height to 100vh will give you what you need.

.view-index {  background: url("http://i.imgur.com/f6f5Xq7.jpg") no-repeat center center;  background-size: cover;  display: -webkit-flex;  display: flex;  height: 100vh;}
.view-text {  color: white;  margin: auto;  text-align: center;}

<div class="container">  <div class="view-index">    <div class="view-text">      <h2>This Navbar isn't fixed</h2>      <h5>When you scroll down it will disappear</h5>      <br>      <p>Full page intro with background image will be always regardless of device </p>    </div>  </div>  <div class="view-extra">    <img src="http://i.imgur.com/0NCooNY.jpg">  </div></div>

How to vertically align a background image that has background-size: cover?

You can use background-position. Something like this :

div {
    background: url(http://placekitten.com/400/400);
    background-size: cover;
    width: 300px;
    height: 150px;
    background-position: 0% 30%;
}

DEMO : JSFIDDLE

CSS - Background image stretch horizontally and repeat vertically?

Instead of cover, use background-size: 100% auto; to size the background image to full browser width while maintaining aspect ratio for its height. Use this in conjunction with background-repeat: repeat-y; to tile it vertically.

Is there an equivalent to background-size: cover and contain for image elements?

Solution #1 - The object-fit property (Lacks IE support)

Just set object-fit: cover; on the img .

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

CSS Image size, how to fill, but not stretch?

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

Background-image: cover broken on mobile

Ok I figured it out by accident. I was using an image from Unsplash.com and the the original resolution is 6000x4000. As I was making a Codepen project to post here I resized the image and wondered why it worked on codepen but not on my pc. Well it seems the resolution needs to be about 5500x3667 or smaller to work.

Maybe there is a limitation I did not know of but anyway got it working now. I didn't change anything else.

Now working on my phone

CSS3 Background-Size: Cover Doesn't Make Image Cover Vertically