Как растянуть фоновое изображение, чтобы оно покрыло весь элемент HTML? - PullRequest
Новая
       12

Как растянуть фоновое изображение, чтобы оно покрыло весь элемент HTML?

84 голосов
/ 25 октября 2008

Я пытаюсь получить фоновое изображение элемента HTML (body, div и т. Д.), Чтобы растянуть его на всю ширину и высоту.

Не повезло. Это вообще возможно, или я должен сделать это как-то иначе, кроме того, чтобы быть фоновым изображением?

Мой текущий css: 

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Заранее спасибо.

Редактировать: я не заинтересован в поддержании CSS в предложении Габриэля, поэтому вместо этого я изменяю макет страницы. Но это кажется лучшим ответом, поэтому я отмечаю его как таковой.

Ответы [ 10 ]

182 голосов
/ 16 марта 2011 
<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>
14 голосов
/ 09 июля 2009

Используйте свойство background-size: http://www.w3.org/TR/css3-background/#the-background-size

8 голосов
/ 07 мая 2013

Короче можете попробовать это .... 

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Где я использовал несколько CSS и JS ... 

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

И у меня это нормально работает.

6 голосов
/ 25 октября 2008

Не уверен, что растяжение фонового изображения возможно. Если вы обнаружите, что это невозможно или не является надежным во всех ваших целевых браузерах, вы можете попробовать использовать растянутый тег img с z-index, установленным ниже, и позицией, установленной в абсолютное значение, чтобы поверх него отображался другой контент.

Дайте нам знать, что вы в конечном итоге делаете.

Редактировать: То, что я предложил, в основном то, что в ссылке Габриэля. Так что попробуйте:)

5 голосов
/ 27 октября 2008

Чтобы расширить ответ @PhiLho, вы можете центрировать очень большое изображение (или изображение любого размера) на странице с помощью: 

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Или вы можете использовать изображение меньшего размера с цветом фона, который соответствует фону изображения (если это сплошной цвет). Это может или не может соответствовать вашим целям. 

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}
4 голосов
/ 22 декабря 2016

Если вам нужно растянуть фоновое изображение при изменении размера экрана, и вам не нужна совместимость со старыми версиями браузера, это подойдет: 

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
3 голосов
/ 09 июля 2015

Следующий код, который я использую в основном для достижения запрошенного эффекта: 

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
3 голосов
/ 12 июня 2015

Если у вас большое пейзажное изображение, этот пример здесь изменяет размер фона в портретном режиме, чтобы он отображался сверху, оставляя пустым внизу: 

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}
2 голосов
/ 04 марта 2014 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
0 голосов
/ 25 октября 2008

Вы не можете в чистом CSS. Вероятно, лучше всего иметь изображение, покрывающее всю страницу за всеми другими компонентами (похоже, это решение, приведенное выше). Во всяком случае, скорее всего, это будет выглядеть ужасно в любом случае. Я бы попробовал либо изображение, достаточно большое, чтобы покрыть большинство разрешений экрана (скажем, до 1600x1200, выше его меньше), чтобы ограничить ширину страницы, либо просто использовать изображение, которое мозаично.

...