Hi, I seem to be having trouble stretching an image using the background-size property. Despite setting it to cover, one or two sides of the image are always getting cropped. What I really want is a way to distort the image so that it stretches to fit any screen size responsively. Is that even possible? Below is the code I've been experimenting with:
.carnival {
background: url(../images/carnival.jpg) no-repeat 50% 50%;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
left: 0;
right: 0;
position: absolute;
}
Here is how I've added the HTML:
<div class="carnival"></div>
Strangely, if I remove any of the following lines, the background doesn't display at all:
height: 100%;
left: 0;
right: 0;
I would greatly appreciate any help on this issue. It's frustrating how complex setting a background image can be for me.