66

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,318
  • 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

5 Answers5

125

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

background-size: auto 100%;
Langlois.dev
  • 1,657
  • 2
  • 10
  • 14
  • 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
37
background-size: contain;

suits me

Pete
  • 54,116
  • 25
  • 104
  • 150
tanzio
  • 1,318
  • 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;  
}
null
  • 2,499
  • 4
  • 23
  • 40
Beep
  • 2,691
  • 6
  • 32
  • 79
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
7

I just had the same issue and this helped me:

html {
    height: auto;
    min-height: 100%;
    background-size:cover;
}
Hashim Aziz
  • 2,547
  • 4
  • 27
  • 52
Simon
  • 1,274
  • 4
  • 14
  • 25
  • 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