I have a background image that looks okay with different aspect ratios. I would like the background to stretch to fit, without scaling to aspect-ratio.
The following causes the background to scale by aspect ratio and the problem is it doesn't show the full background image. I would like it to stretch to fully fit by height and width.
#background {
background: url("../images/watercolor_bg.svg") no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
The following causes the background image to fit by height, or width, but not both (it maintains aspect ratio and causes a white border on the larger side).
#background {
background: url("../images/watercolor_bg.svg") no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
Changing it to width: 100%; height: 100%;
doesn't do anything either.
UPDATE: Fixed by using .png instead of vector image.
Aucun commentaire:
Enregistrer un commentaire