Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
На карте Офис AMWAY в ЯрославлеПрием и выдача заказов, презентация продукции Амвей, мастер–классы, вопросы по бизнесу Amway:
Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
Телефон: +7 (920) 112-00-91
Email: matyxho@mail.ru
Сайт: https://www.amway.ru/user/lebedem
Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » Два фоновых изображения одновременно
Сниппет
Одна знакомая девушка попросила меня помочь ей сделать небольшой сайт для детского сада. Необходимо было реализовать фоновые изображения для привлекательности.
Два фоновых изображения одновременно
Опубликовал  Pisatel Добавлено  24-05-2013 14:28 24 Май 2013 14:28:01 2492  Прочтений 2492 Прочтений  0 Комментариев 0 Комментариев
 printer
В дизайнерском ремесле я не силен, но понимал, что желательно делать два фоновых изображения: одно- в шапке, второе- в подвале. Как же это реализовать? Использовать кучу дивов? Не, мне было влом переписывать шаблон дизайна. И тогда я нашел самое простое решение: оказывается, свойство background теперь поддерживает сразу несколько изображений, перечисленных через запятую. Сразу скажу про один очень важный нюанс: изображения будут накладываться не верхнее на следующее нижнее, а наоборот! То есть, снизу-вверх, поэтому я в коде css размещаю сначала нижнюю картинку, а затем- верхнюю, иначе верхняя перекроет весь экран. Так как это фон, делаю его в теле body документа. Итак, вот как это будет выглядеть:

Код: CSS
background: url(images/grass.png) left bottom repeat-x, url(images/bgSun.png) left top no-repeat;




Итак, нижнее фоновое изображение (трава, йопт) я расположил внизу и слева документа (bottom left), а затем размножил по горизонтали (repeat-x), верхнее изображение (солнце и небо, йопта) я расположил, соответственно, сверху и слева (top left), и запретил размножение (no-repeat). Однако, возникла другая проблема: верхнее фоновое изображение было меньше ширины экрана, и это, мягко говоря, совсем несимпатично выглядело.

Че, блин, делать? Не множить же его! Начал чесать репу: ведь не хочется выглядеть нубом (коим, положа руку на сердце, являюсь, так как нет пределов для совершенства) перед девушкой. И вычесал йа фсетаки! Вспомнил, что есть такое свойство в css 3, как background-size, которое задает размер фонового изображения, и если я поставлю параметр 100%, то моя картинка будет растягиваться на любом экране во всю ширину последнего. Не забываем, правда, что качество изображения от этого может страдать... В конце мой код стал выглядеть так:

Код: CSS
body {

background: url('images/grass.png') left bottom repeat-x, url('images/bgSun.png') left top no-repeat;

position: relative;

-moz-background-size: 100%;

-webkit-background-size: 100%;

-o-background-size: 100%;

background-size: 100%;

width: 100%;

padding: 250px 0 100px 0;

margin: 0;

}




Как видим, задал еще отступы внутри элемента и добавил позиционирование для IE - на всякий пожарный.

Ну и для усиления эффекта задал еще прозрачность для логотипа с помощью свойства opacity. Результат того, что получилось- на скриншоте. Не нужно смотреть на "красоту" созданного мной "дизайна"- это черновой шаблон лишь для того, чтобы показать тебе, как добавить несколько фоновых изображений.

Удачи тебе, сайтостроитель, и всего наилучшего!

Пример наложения двойного фонового изображения
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
Нет комментариев.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
13448 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
3378 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
14074 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
7787 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
7229 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
53304 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
4077 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
8238 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
9350 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
3085 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
5857 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
7822 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
41751 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
3756 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
13796 13 Pisatel
03. апреля 2015