Adjust Background as per resolution

Asked

Viewed 433 times

0

I have a background image, and I would like it to fill in the div and adjust to the resolution of the monitor.

The div is already responsive because I use Foundation Zurb.

I did that, but the image doesn’t fit.

background: url('../img/fundos/fundo.png')no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
css

1 answer

2


I use Foundation also and the following excerpt tested in Chrome and Firefox updated:

// supondo um identificador tipo classe para sua div
.my-div{
   background-image: url(../img/fundos/fundo.png);
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

To learn more about CSS3 background image properties, support and prefix usage caniuse with.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.