Have an image fill all the div (CSS)

Question

I have on my website divs whose width varies with the width of the window, and I'd like to have a background for these divs. When I'm in full screen (1920*1080), the background images are exactly how I want them to be : But when I resize my window, I get this : I used the background-size:cover; attribute but it does not seem to work...

CSS :

.cleft1 {
    width: 33.333333%;
    height: 300px;
    display: inline-block;
    margin-right: 0;
    background-image: url('../img/aero.png');
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

`background-size:cover` doesn't seem to work ? Can you work out a snippet reproducing your problem ? See https://stackoverflow.com/help/mcve — Denys Séguret, Mar 13 '17 at 16:52
Yup, here you go : `.cleft1 { width:33.333333%; height:300px; display:inline-block; margin-right:0; background-image:url('../img/aero.png'); background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; }` — narfi, Mar 13 '17 at 16:53
http://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat — Ousmane D., Mar 13 '17 at 16:54
@narfi Please have a look at the "snippet" button in the toolbar when editing your question — Denys Séguret, Mar 13 '17 at 16:54
Show us your code in the post please. All of the code needed to reproduce this part of the page as a [mcve] in the post itself - not just the CSS. — Michael Coker, Mar 13 '17 at 16:59

score 0 · Answer 1 · answered Mar 13 '17 at 17:19

you can use this. I am not sure if it will work. didn't tested it yet.

   .your-div { 
      background: url(img.png) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
    }

Have an image fill all the div (CSS)

1 Answers1