Как растянуть фон сайта на всю ширину окна

Опубликовано Опубликовано в рубрике Веб-разработка, Обучающие курсы, Советы

Для масштабирования фона предназначено свойство CSS background-size. Если в качестве его значения указать 100%, то фон займет всю ширину экрана.

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон на весь экран</title>
<style>
body {
background: url(images/image.png) no-repeat;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
}
</style>
</head>
<body>
</body>
</html>

При этом следует учитывать, что при увеличении окна браузера изображение также увеличится, что может привести к ухудшению его качества.

 

Подождите, промокоды загружаются

РАССКАЖИТЕ ДРУЗЬЯМ



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *