Background Image Height Problem

[flpevt]

Hello guys, I’m making a responsive website and i have a problem with a background image. Even putting height 100% nothing appears. When I set min-height: 800px, then the image appears but is distorted. Could someone help me please?

I posted the code here: https://jsfiddle.net/85dsg4mn/

Thanks
Flp

[ruzip]

You should define the height and width then use background-size: cover or contain;


.image {
width: 300px;
height: 200px;
background-size: cover;
}


Here is the updated fiddle:
https://jsfiddle.net/gp1xuL85/

[flpevt]

Hello, thanks by reply. I put width, height and background-size:cover, but the problem continues… I put all code here: https://jsfiddle.net/2q860hub/

Tks

[vulkanus]

Hi,

Maybe this?

body .slide > div .img {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: no-repeat center center;
/* background-size: cover; */
margin-bottom: 20px;
}

or play with:
https://developer.mozilla.org/pt-BR/docs/Web/CSS/background-size

[Author]

Posts