The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Background Image Height Problem
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
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/
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
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