Масштабирование фоновых изображений с помощью CSS

Question

Как масштабировать фоновое изображение с помощью CSS?Изображение прикреплено с помощью CSS, и я хотел бы масштабировать его до определенной ширины

Answer 1

Вы можете попробовать следующий код:

.aboutpic {
width: 150px; /* replace 150px with something you need */ 
float: left;
background-image: url(../images/aboutpic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 139px; /* replace 139 px with something you need */
}

Тогда в html просто положите:

<div class="aboutpic"></div>

Это работает. Я проверял это.

Answer 2

Со свойством background-size (которое имеет ограниченную поддержку ).

Answer 3

Javascript - хороший способ начать, jquery.backstretch.js - очень хороший jquery lib для масштабирования фона img.

Или, если ваш целевой клиент использует современный браузер, что означает, что он можетподдержка CSS3, используйте это:

body{
background:url(background.jpg);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

http://www.w3schools.com/cssref/css3_pr_background-size.asp