vendredi 10 juin 2016

background image stretch to fit without scaling


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