There is a block with a background.

.slide { background-image: url("../img/slide.jpg"); height: 476px; background-position: 50%50%; background-repeat: no-repeat; }

And can I specify the size of this image? I want for each expansion of the screen that would be compressed, and then I have to do a lot of pictures for each extension.

  • background-size: cover; - G.Denis

1 answer 1

Add:

 .slide { -webkit-background-size: cover; background-size: cover; }

or

 .slide { -webkit-background-size: contain; background-size: contain; }

Example with cover :

 .slide { background-image: url("http://www.randrs.ru/photo/1-0/903_bumblebee-.jpg"); height: 476px; background-position: 50% 50%; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } 
 <div class="slide"></div>

Example with contain :

 .slide { background-image: url("http://www.randrs.ru/photo/1-0/903_bumblebee-.jpg"); height: 476px; background-position: 50% 50%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; } 
 <div class="slide"></div>