CSS: бэкграунд растягивается по ширине страницы

@Ellar · Регистрация: 17.07.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте, уважаемые знатоки! Столкнулся со следующей проблемой. На сайте нужно использовать большой бэкграунд (1600 на 3000). Он должен зависеть от ширины страницы, т.е. растягиваться или сжиматься при изменении размера окна браузера.

Средствами CSS это сделать не удается. Если задать width:100%, изображение показывается в реальном размере настолько, насколько оно вписывается в окно.

Найденный в интернете способ также не помогает. Предлагается создать перед главным блоком div, в котором все содержимое страницы, еще один блок, в котором в html расположена картинка с шириной 100%, а в css у обеих блоков задано абсолютное позиционирование и z-индексы, позволяющие содержимому главного блока находиться поверх бэкграунда. В итоге, получается, что картинка по ширине зависит от размера окна, но теперь высота у нее всегда одна и та же, не зависимо от контента страницы. Это существенный недостаток, так как на страницах с малым количеством текста внизу появляется много лишнего места.

Существуют ли другие способы? Обычные принципы оформления бэкграунда в css (центровка, к примеру) не годятся, нужно только так. Надеюсь на вашу помощь.

@Dimedrol · 17.07.2010, 23:44

В CSS3 есть такая фича - background-size
Может попробуете прописать

CSS
1
2
3
4
body{
background:url('image.png') no-repeat center center;
background-size: 100% 100%;
}

@Ellar · 18.07.2010, 17:13 **[ТС]**

Dimedrol, спасибо вам за совет, но метод не совсем подошел.

Проблема в том, что высота должна зависеть от контента, высота некоторых страниц всего-то 1200 px, другие доходят до 3 тысяч. Картинка должна тянуться только по ширине, по высоте она просто плавно переходит в фоновый цвет. Сейчас же картинка растягивается на всю высоту страницы, пропорции не соблюдаются, а на некоторых страницах браузер (Opera 10.6) вообще не отображает картинку, наверное, в связи с сильной растяжкой. Чем можно заменить 100% для height, чтоб исбежать таких искажений?

Вот мой проблемный участок CSS:

CSS
1
2
3
4
5
6
7
8
9
body {
margin:0;
padding:0;
}
#contanier{
background:url('адрес картинки') no-repeat center center;
background-size: 100% 100%; 
background-color: #ffcb38;
}

Кстати, IE8 ничего не понимает и выдает только фоновый цвет страницы, игнорируя изображение. Существуют ли хаки на этот случай?

@ПростоЯ · 19.07.2010, 08:43

Попробуйте так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
  <style type="text/css">
    html, body {
      margin: 0px;
      height: 100%;
    }
    #background {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    #body {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  </style>
</head>
<body>
  <img id="background" src="background.gif" />
 
  <div id="body">
    Здесь содержимое страницы
  </div>
</body>
</html>

@Alorian · 20.07.2010, 08:31

Dimedrol, CSS3 это конечно хорошо, но про ИЕ забывать не стоит. Где то здесь на форуме выкладывали видео которое очень подходит к моим словам.

Не по теме:

В видео есть такая строчка:
I'd like to say that I simply do not care, but how can I ignore so much market share.

Очень советую посмотреть

@outoftime · 20.07.2010, 12:34

я дeлат что-то типа:

CSS
1
2
3
4
5
6
7
8
9
img.background {
      position: absolute; /* теперь мы можем управлять рисунком как слоем */
      left: 0px;
      top: 0px;
      width: на ваше усмотрение;
      height: можно не менять, что-бы сохранять пропорции рисункa фона;
      /* важно */
      z-index: -1;
}

HTML5
1
2
3
...
<img class="background" src="">
...

@Ellar · 20.07.2010, 17:20 **[ТС]**

ПростоЯ, спасибо, но при вашем методе независимо от контента страницы, по высоте картинка вписывается в размер окна. Т.е. опять же искажения и плюс к тому, как только прокручиваем за ширину окна - пустое пространство.

outoftime, спасибо за совет, но я пробовал делать что-то подобное. Только не классом для картинки, а двумя блоками div, у одного из которых z-index минусовый. Результат тот же, картинка показывается в полную высоту, не зависимо от того, нужно это, или нет.

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

@outoftime · 20.07.2010, 18:09

Ellar

HTML5
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <img class="fon" src="img/fon.jpg" alt="">
    </body>
</html>

CSS
1
2
3
4
5
6
7
img.fon {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    z-index: -1;
}

Все пашет.
P.S. синдром КР - вылечим.

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

@Ellar 0 / 0 / 0 Регистрация: 17.07.2010 Сообщений: 3

	CSS: бэкграунд растягивается по ширине страницы 17.07.2010, 20:50. Показов 21006. Ответов 7 Метки нет (Все метки) Здравствуйте, уважаемые знатоки! Столкнулся со следующей проблемой. На сайте нужно использовать большой бэкграунд (1600 на 3000). Он должен зависеть от ширины страницы, т.е. растягиваться или сжиматься при изменении размера окна браузера. Средствами CSS это сделать не удается. Если задать width:100%, изображение показывается в реальном размере настолько, насколько оно вписывается в окно. Найденный в интернете способ также не помогает. Предлагается создать перед главным блоком div, в котором все содержимое страницы, еще один блок, в котором в html расположена картинка с шириной 100%, а в css у обеих блоков задано абсолютное позиционирование и z-индексы, позволяющие содержимому главного блока находиться поверх бэкграунда. В итоге, получается, что картинка по ширине зависит от размера окна, но теперь высота у нее всегда одна и та же, не зависимо от контента страницы. Это существенный недостаток, так как на страницах с малым количеством текста внизу появляется много лишнего места. Существуют ли другие способы? Обычные принципы оформления бэкграунда в css (центровка, к примеру) не годятся, нужно только так. Надеюсь на вашу помощь. 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	20.07.2010, 08:31
	Dimedrol, CSS3 это конечно хорошо, но про ИЕ забывать не стоит. Где то здесь на форуме выкладывали видео которое очень подходит к моим словам. Не по теме: В видео есть такая строчка: I'd like to say that I simply do not care, but how can I ignore so much market share. Очень советую посмотреть 0

@Ellar 0 / 0 / 0 Регистрация: 17.07.2010 Сообщений: 3
	20.07.2010, 17:20 [ТС]
	ПростоЯ, спасибо, но при вашем методе независимо от контента страницы, по высоте картинка вписывается в размер окна. Т.е. опять же искажения и плюс к тому, как только прокручиваем за ширину окна - пустое пространство. outoftime, спасибо за совет, но я пробовал делать что-то подобное. Только не классом для картинки, а двумя блоками div, у одного из которых z-index минусовый. Результат тот же, картинка показывается в полную высоту, не зависимо от того, нужно это, или нет. Получается, не так просто решить такую задачку с неуправляемой высотой... Всем еще раз спасибо за советы, я поищу другой способ верстки. Что-нибудь придумаю, чтобы обойтись без одного огромного бэкграунда. 0

CSS: бэкграунд растягивается по ширине страницы

Решение