69

I want background image fit with the height of the div, there's a way to do that? background-size:cover; fit only with the width and height autoscale (I need the opposite effect). Thanks.

tanzio
  • 1,380
  • 1
  • 12
  • 15
  • 1
    Try background-size: 1% 100%; –  Nov 20 '13 at 10:56
  • Possible duplicate of https://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion? – Zeta Nov 04 '19 at 21:22

6 Answers6

130

I know this is an old answer but for others searching for this; in your CSS try:

background-size: auto 100%;
Langlois.dev
  • 1,951
  • 2
  • 12
  • 15
  • 10
    This is perfectly works for me. especially in my case when I want to have background image only resize based on the height alone. – Zuzu Softman Dec 17 '15 at 09:58
  • 3
    This needs `min-height: 100%` to handle "taller than background" situations. – Skippy le Grand Gourou Jan 18 '19 at 11:12
  • Very helpful! In my case I used the variation `background-size: auto auto;` so that whichever axis was smaller (width or height), it would stay within that. Otherwise it clipped when the page was resized. – Mentalist Apr 10 '19 at 07:06
38
background-size: contain;

suits me

Pete
  • 57,112
  • 28
  • 117
  • 166
tanzio
  • 1,380
  • 1
  • 12
  • 15
  • 10
    This doesn't work if your image is smaller than the container' height. @Ajikan answer below will work for that (```background-size: auto 100%;```) – Sam Willis Mar 31 '17 at 16:12
14

try

.something { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;  
}
K-G
  • 2,799
  • 4
  • 26
  • 42
Beep
  • 2,737
  • 7
  • 36
  • 85
8
body.bg {
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    background: white url(../images/bg-404.jpg) center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}   
Try This





    body.bg {
     background-size: cover;
     background-repeat: no-repeat;
     min-height: 100vh;
     background: white url(http://lorempixel.com/output/city-q-c-1920-1080-7.jpg) center center no-repeat;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    } 


    <body class="bg">


     
    </body>
Diego Quispe
  • 119
  • 1
  • 2
8

I just had the same issue and this helped me:

html {
    height: auto;
    min-height: 100%;
    background-size:cover;
}
Hashim Aziz
  • 4,074
  • 5
  • 38
  • 68
Simon
  • 1,314
  • 4
  • 14
  • 26
  • 1
    Other answers don't seem to correctly handle **both** "larger than background" and "taller than background" situations, or involve too much CSS. This one works perfectly (BTW `height: auto;` isn't even needed, just use `background-size: cover; min-height: 100%`). – Skippy le Grand Gourou Jan 18 '19 at 11:09
  • This is an amazingly simple answer for what seemed like a bug that I've been trying to solve on a site for weeks. I don't understand why `height` can't just be used like I was doing this whole time, but regardless, thank you. For the record, I found it was fine to set `background-size:cover` on the HTML element itself. – Hashim Aziz Aug 11 '20 at 23:25
-1

This style helped me to fully fit image by height:

body {
    background-image: url("/static/img/grass.jpg");
    background-repeat:no-repeat;
    background-size: cover;
    min-height: 100vh;    
}
oruchkin
  • 1,145
  • 1
  • 10
  • 21