Главная » Создание сайтов » Верстка » Масштабируемая картинка на фоне сайта или резиновый фон

Масштабируемая картинка на фоне сайта или резиновый фон

Масштабируемая картинка на фоне сайта или резиновый фон

Озадачился вопросом, как сделать резиновый фон. Дизайнеры, они ведь не всегда знают основных правил верстки, им лишь бы сделать. Сколько макетов теряется при этом... Эх.

Картинка на фоне должна сужаться и растягиваться по мере изменения окна браузера. Каркас из двух колонок. Минимальная ширина 1000px. Это все мы рассмотрим сегодня.

Задаем position absolute и картинке и самому контенту. Затем с помощью z-index помещает фон вниз, а все остальное наверх.

Делаем див, внутри которого будет лежать фоновая картинка.
<div id="fon">
<img src="fon.jpg" alt="" />
</div></div>
<div class="code">#fon{
height:100%;
width:100%;
z-index:1;
min-width:1000px;
max-width:1600px;
}
#fon img{
height:100%;
width:100%;
position:absolute;
}

Теперь див со всем остальным содержимым.
<div id="page">
<div class="sid">
<div class="trans"></div>
<div class="text">
Боковая колонка (sidebar)
</div>
</div>
<div class="note">
<div class="trans"></div>
<div class="text">
Страница (page)
</div>
</div>
<ul id="menu">
<li><a href="#">Главная</a></li>
<li style="border:0 !important;"><a href="#">О компании</a></li>
</ul>
</div>

#page{
position:absolute;
top:0;bottom:0;right:0;left:0;
z-index:100;
}
.note{
border:1px solid #ddd;
margin:2% 7% 0 0px;
width:55%;
float:right;
min-height:500px;
height:auto !important;
height:500px;
position:relative;
}
.trans{
background:#fff;
opacity:0.4;
position:absolute;
height:100%;
width:100%;
}
.text{
position:relative;
padding:10px;
}
.sid{
border:1px solid #ddd;
margin:2% auto 0 7%;
width:23%;
float:left;
position:relative;
min-height:500px;
height:auto !important;
height:500px;
}
ul#menu{
position:absolute;
bottom:5%;
left:10%;
font-size:px;
}
#menu li{
float:left;
list-style:none;
width:200px;
text-align:center;
border-right:1px solid #333;
}
#menu li a{
text-decoration:none;
color:#fff;
border-bottom:1px dashed transparent;
}
#menu li a:hover{
text-decoration:none;
color:#fff;
border-bottom:1px dashed #ddd;
}

Вот... Что у нас вышло, можно посмотреть тут: size-fon.html.

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

За картинку спасибо: http://www.htmllancer.tu2.ru/. С уважением, Vasilenko Ivan!
22 марта 2009 в 16:0038 комментариев Верстка,

Комментарии — 38 комментариев

  1. #628 booblik в 16:56, 22 марта 2009: (подписался)

    Ответить | Цитировать

    Спасибо! Очень интересно было, как это сделано!

  2. #629 Алексей в 18:05, 22 марта 2009: (подписался)

    Ответить | Цитировать

    Прикольно! :-) Спасибо! :-)

  3. #631 WebMast в 20:35, 22 марта 2009:

    Ответить | Цитировать

    Помните! Этот метод только для меня. Для вас его нужно затачивать... Например минимальную и максимальную ширину экрана.

  4. #634 WOLF BESPREDEL в 3:11, 23 марта 2009:

    Ответить | Цитировать

    Спасибо, на днях испробую этот способ на практике... Но у меня в FF ссылки главная и о компании криво отображаться, т.е. накладываться на блоки. Думаю чтобы этого не было нужно отступ в CSS прописать от блоков...

  5. #635 WebMast в 10:33, 23 марта 2009:

    Ответить | Цитировать

    У меня в фф нормально все отображается. Скорее всего это зависит от разрешения монитора. Да, пропиши отступы...

  6. #675 SiteDev в 12:20, 2 апреля 2009:

    Ответить | Цитировать

    В IE7, увы, блоки не прозрачны. Т.е. уже не кроссбраузерно получилось.

  7. #678 WebMast в 18:54, 2 апреля 2009:

    Ответить | Цитировать

    Прочитайте правильно статью, и вы найдете «Пример не является полностью автоматизированным». Вообще я добавил цвет на блоки специально, можно обойтись без них... Если кто-то не понимает css, то эта статья не для него.

    Чтобы сделать блоки прозрачными, найдите класс «trans» и пропишите для него хаки на прозрачность.

  8. #730 Ольга в 21:34, 8 апреля 2009:

    Ответить | Цитировать

    Мне пригодилось, только опять пробоемы, у меня код сложнее, картинки вообще не видно стало.

  9. #733 WebMast в 7:04, 9 апреля 2009:

    Ответить | Цитировать

    Ольга, можешь написать на нашем форуме!

  10. #1937 Nik ADA в 18:46, 25 июня 2009: (подписался)

    Ответить | Цитировать

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

  11. #2500 WebMast в 8:12, 13 июля 2009:

    Ответить | Цитировать

    Nik ADA, пропиши:

    #fon img{min-height: {x} ;}

  12. #6633 Дмитрий в 11:01, 2 октября 2009:

    Ответить | Цитировать

    Спасибо. Но нельзя ли в Вашем примере зафиксировать фон?

  13. #6679 WebMast в 7:54, 3 октября 2009:

    Ответить | Цитировать

    Дмитрий, нет. Здесь мы ставим картинку, а не фон. Этот пример подходит для сайтов с маленьким контентом.

  14. #6774 Дмитрий в 10:13, 5 октября 2009:

    Ответить | Цитировать

    А для сайтов с большим контентом у вас случайно нет примера? Давно ищу решения задачи, что бы при прокрутки текста, фон был фиксированным, а при уменьшении окна, резиновым ?

  15. #6781 WebMast в 18:03, 5 октября 2009:

    Ответить | Цитировать

    Дмитрий, если чесно, то я не знаю... У background можно фиксировать фон...

  16. #6814 Дмитрий в 17:00, 6 октября 2009:

    Ответить | Цитировать

    background у меня фиксируется, но когда окно уменьшается всё сжимается, кроме фона. Если что то попадётся, буду весьма признателен.

  17. #6831 Кирилл в 21:05, 7 октября 2009:

    Ответить | Цитировать

    Спасибо огромное за статью, реально очень помогла. Но у меня фоновый рисунок несколько другой, а точнее верх не белый. И виден белый отступ. Помогите плз.

  18. #6840 WebMast в 9:30, 8 октября 2009:

    Ответить | Цитировать

    Кирилл, в смысле, как белый оступ... Поубирай где не нужно margin и padding.

  19. #6867 TIM21 в 19:10, 9 октября 2009:

    Ответить | Цитировать

    А можно на вашем сайте обсудить эту статью более подробно и задать вопросу НУБОВСКИЕ по постройке страницы?!

  20. #6870 WebMast в 20:21, 9 октября 2009:

    Ответить | Цитировать

    TIM21, напиши мне на icq. Номер найдешь на странице контактов...

  21. #8267 2k в 18:47, 20 ноября 2009:

    Ответить | Цитировать

    а есть хак под ie 6 для этого?

  22. #8268 WebMast в 18:56, 20 ноября 2009:

    Ответить | Цитировать

    Что именно не работает на ИЕ6?

  23. #8305 2k в 13:34, 22 ноября 2009:

    Ответить | Цитировать

    вымещает весь контент собой, ниже.

  24. #8306 2k в 13:35, 22 ноября 2009:

    Ответить | Цитировать

    div id=fon фоновая картинка, а в остальных броузерах всё нормально

  25. #8324 WebMast в 19:08, 23 ноября 2009:

    Ответить | Цитировать

    А скриншот посмотреть можно?

  26. #9351 pioner в 2:34, 20 февраля 2010:

    Ответить | Цитировать

    а можно ли вместо полупрозорых колонок белого цвета сделать полупрозорую картинку?

  27. #9352 WebMast в 8:53, 20 февраля 2010:

    Ответить | Цитировать

    pioner, конечно. В блок sid или note вставьте картинку и в стилях пропишите ей прозрачность.

  28. #9685 Алексей в 12:08, 22 мая 2010:

    Ответить | Цитировать

    Добрый день. Одно но!, если браузер растянуть по высоте фоновая картинка не ряснится а становится 100% ширины div и 100% своей ширины, под фоном образуется пустота, колонки же растягиваются на высоту браузера. Можно посмотреть в приведенном примере. Вопрос: как это исправить? Спасибо.

  29. Алексей, наверное я что-то не понял. Покажите скриншот. У меня, вроде, все нормально.

  30. #9695 Алексей в 13:12, 24 мая 2010:

    Ответить | Цитировать

    Отправил скриншет на этот адрес evgen.pm@gmail.com

  31. Алексей, этот пример подходит только для страниц с маленьким контентом. Но если очень нужно, то решение вашей задачи есть только через position:fixed, для фоновой картинки.

    #fon img{

    height:100%;

    width:100%;

    position:fixed;

    }

  32. #10822 Goliaf в 0:21, 9 января 2011: (подписался)

    Ответить | Цитировать

    А зачем Два закрывающих дива?

  33. #11669 Веб в 13:16, 7 июня 2011: (подписался)

    Ответить | Цитировать

    Скажите а как такое сделать с фоном, только если содержимое — флеш?

  34. #11714 Alqanor в 11:29, 18 июня 2011:

    Ответить | Цитировать

    Алексей, попробуйте добавитьв body атрибут overflow: hidden.

  35. #19259 Илья в 6:36, 17 апреля 2013: (подписался)

    Ответить | Цитировать

    Проверил на ipad первом. При вращении девайса все съезжает. Приходится обновлять страницу

  36. #24275 Алексей в 15:33, 19 декабря 2013:

    Ответить | Цитировать

    Пытаюсь подобное реализовать у себя но сайте, но у меня есть проблема, которая есть и в вашем примере...Если окно браузера уменьшить и протянуть нижний скролинг вправо, то появляется пробел между фоном и окном браузера...скрин прилагаю pixs.ru/showimage/Bezimen...220_10149854.jpg

  37. #33584 Михаил в 22:13, 25 августа 2014:

    Ответить | Цитировать

    Уменьшите ваш сайт до размеров мобильника, в вашем решении получается не очень красивое искажение картинки

  38. #34093 Bloodlog в 13:14, 3 сентября 2014:

    Ответить | Цитировать

    Лучше на картинку не position : absolute, а fixed ставить...Иначе бага при прокрутке будет.

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting