456

I have

body {
    background: url(images/background.svg);
}

The desired effect is that this background image will have width equal to that of the page, height changing to maintain the proportion. e.g. if the original image happens to be 100*200 (any units) and the body is 600px wide, the background image should end up being 1200px high. The height should change automatically if the window is resized. Is this possible?

At the moment, Firefox looks like it's making the height fit and then adjusting the width. Is this perhaps because the height is the longest dimension and it's trying to avoid cropping? I want to crop vertically, then scroll: no horizontal repeat.

Also, Chrome is placing the image in the centre, no repeat, even when background-repeat:repeat is given explicitly, which is the default anyway.

2

13 Answers 13

989

There is a CSS3 property for this, namely background-size (compatibility check). While one can set length values, it's usually used with the special values contain and cover. In your specific case, you should use cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Eggsplanation for contain and cover

Sorry for the bad pun, but I'm going to use the picture of the day by Biswarup Ganguly for demonstration. Lets say that this is your screen, and the gray area is outside of your visible screen. For demonstration, I'm going to assume a 16x9 ratio.

screen

We want to use the aforementioned picture of the day as a background. However, we cropped the image to 4x3 for some reason. We could set the background-size property to some fixed length, but we will focus on contain and cover. Note that I also assume that we didn't mangle the width and/or height of body.

contain

contain

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

This makes sure that the background image is always completely contained in the background positioning area, however, there could be some empty space filled with your background-color in this case:

contain

cover

cover

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off:

cover

Demonstration with actual code

div > div {
  background-image: url(https://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}
<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

7
  • This is exactly what I want, thanks. It doesn't seem to work in Chrome (or Chromium, at least) -- got any bright ideas?
    – spraff
    Feb 14, 2012 at 12:40
  • According to quirksmode.org/css/contents.html#t44 it should work in Chrome without any prefix. However, have you tried the -webkit- prefix?
    – Zeta
    Feb 14, 2012 at 12:54
  • 4
    Yauhen's answer (at the bottom of this page) was actually what I was looking for: background-size: contain Jul 18, 2013 at 2:30
  • 1
    @DannyBeckett: While this is possible, it isn't what the OP was looking for: "I want to crop vertically, then scroll: no horizontal repeat."
    – Zeta
    Jul 18, 2013 at 4:09
  • 4
    contain is like zoom fit. cover is like zoom fill. contain adjusts image size to match the larger dimension among width and height. cover adjusts image size to match the smaller dimension among width and height.
    – ahnbizcad
    May 26, 2014 at 2:01
48

Based on tips from https://developer.mozilla.org/en-US/docs/CSS/background-size I end up with the following recipe that worked for me

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}
2
  • 3
    Although I used background-position: center;, this did work better for me than backgound-size: cover;.
    – Nate
    Apr 26, 2013 at 4:50
  • 1
    May I know why we need the overflow-y: hidden part?
    – Nam G VU
    Aug 17, 2017 at 7:37
25

Background image is not Set Perfect then his css is problem create so his css file change to below code

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; background-size: 100% 100%;"

14

I'm not sure what you're looking for exactly, but you really should check out these excellent blog posts written by Chris Coyier from CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Read the descriptions for each of the articles and see if they're what you're looking for.

The first answers the following question:

Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn't stretch weird). Also, doesn't cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline tag.

The second post's goal is to get the following, a "background image on a website that covers the entire browser window at all times. "

Hope this helps.

11

Just add this one line:

    .your-class {
        height: 100vh;
    }

vh is viewport height. This will automatically scale to fit the device' browser window.

Check more here: Make div 100% height of browser window

10
body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}
1
  • 21
    describe what is the problem exactly and how you solve it, please don't paste a bunch of code here without explanation.
    – Siavash
    Oct 8, 2018 at 9:37
8

Try this,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
0
2

I had the same issue, unable to resize the image when adjusting browser dimensions.

Bad Code:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}


Good Code:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

The key here is the addition of this element -> background-size: contain;

2

Here's what worked for me:

background-size: auto 100%;
1
  width: 100%;
  height: 100vh;
  background: url("../img/hero-bg.jpg") top center;
  background-size: cover;
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
1
  • 3
    Please read How do I write a good answer?. While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. Jul 17, 2022 at 3:48
1

if you set min-height, for example:

min-height: 100vh;

You can use the below code to fit your background easily

body {
  background: url(images/background.svg);
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}
0

Use background-size cover property to fill the page. use background position, attachment, and repeat for background adjustments...

html {
           background: url(https://cdn.pixabay.com/photo/2023/08/11/04/41/woman-8182795_1280.jpg);
           background-position: center center;
           background-attachment: fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          background-repeat: no-repeat;
        }

-4

Setting background size does not help, the following solution worked for me:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

It basically crops the image and makes it fit in, background-size: contain/cover still didn't make it fit.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.