Как сделать резиновый фон на сайте


где применять и как сделать самому

 

Доброго времени суток всем, кто прямо сейчас читает мой блог! Каждый из вас хоть раз, но встречался с такими сайтами, на которых при масштабировании фоновое изображение или другие важные графические объекты «прятались» за границами экрана.

В некоторых случаях это критично для пользователя, ведь полезная информация просто исчезает. Именно поэтому в текущей статье я расскажу, как сделать резиновый фон css — средствами, раскрою маленькие хитрости и конечно же приведу контрольные примеры. Думаю, пришло время приступать к обучению!

Что такое резиновый фон и как им пользоваться?

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

Как же его можно заприметить на веб-сервисах? Очень просто. При увеличении или уменьшении окна браузера внедренные объекты (текст, рисунки, кнопки и т.д.) будут сдвигаться, подстраиваясь под размер вкладки.

В этот же момент резиновое изображение почти не будет видоизменяться. А если масштабируемое окно сохранит пропорции, то фон останется идентичен и только размер изображения будет колебаться.

Каким образом создается резиновый фон?

Существует несколько способов «превращения» обычного изображения в растягиваемое. Все они используют одно и то же свойство. Отличие состоит только в том, что второй способ, о котором я расскажу, появился благодаря css3.

Главные инструменты, которые используются в обеих вариантах, это background-size и background.

Первое свойство управляет размером изображения, а второе задает сам путь к картинке. Также через background можно указать повторяемость и пролистывание вместе с контентом.

Итак, начнем с первого и более старого варианта.

Растягиваемость картинки устанавливается при помощи процентов. Так, строка background-size: 100% растянет изображение на все окно браузера вне зависимости от его размера.

 

В некоторых случаях можно увидеть и такой код: background-size: 100% auto .

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

Для наглядности разберем пример. Для сайта был сверстан блок с текстом и задано резиновое изображение.

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 29 30 31 32 33 34 35 
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Растягиваемый фон</title>
 <style>
 body {
 background: url(http://www.zastavki.com/pictures/originals/2012/Nature_Flowers_Big_flowers_of_a_sunflower_036583_.jpg) no-repeat center center fixed;
 -o-background-size: 100% auto; 
 -webkit-background-size: 100% auto;
 -moz-background-size: 100% auto; 
 background-size: 100% auto; 
 text-align: center;
 color: #8B2500;
 }
 div {
 background: #FFFACD;
 border: 5px double #FFA500;
 width: 86%;
 margin: 4% 4% 4% 4%;
 padding: 35px;
 } 
 h2 {
 color: #FFA500;
 text-shadow: 2px 2px 1px #8B4513;
 }
 </style>
 </head>
 <body>
 <div>
 <h2>Создайте солнечное настроение вместе с туристической компанией "Подсолнух"</h2>
 <p>Мы предлагаем туры в солнечную Мексику, загадочный Египет, великолепную Францию...</p>
 </div>
 </body>
 </html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Растягиваемый фон</title> <style> body { background: url(http://www.zastavki.com/pictures/originals/2012/Nature_Flowers_Big_flowers_of_a_sunflower_036583_.jpg) no-repeat center center fixed; -o-background-size: 100% auto; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; background-size: 100% auto; text-align: center; color: #8B2500; } div { background: #FFFACD; border: 5px double #FFA500; width: 86%; margin: 4% 4% 4% 4%; padding: 35px; } h2 { color: #FFA500; text-shadow: 2px 2px 1px #8B4513; } </style> </head> <body> <div> <h2>Создайте солнечное настроение вместе с туристической компанией "Подсолнух"</h2> <p>Мы предлагаем туры в солнечную Мексику, загадочный Египет, великолепную Францию...</p> </div> </body> </html>

Обратите внимание на такие моменты:

  1. background: url (http://www.zastavki.com/pictures/originals/2012/Nature_Flowers_Big_flowers_of_a_sunflower_036583_.jpg) no-repeat center center fixed. В этой строчке кода я описал изображение как фиксированное (оно не будет скролироваться вместе с содержимым веб-страницы) и не повторяющееся.
  2. Что касается слов center center, то они указывают, какая именно часть изображения всегда будет видна вне зависимости от масштаба. Первый параметр отвечает за левый и правый край рисунка, а второй – верхний и нижний край. Таким образом можно закрепить изображение так: left bottom.
  3. В этом случае указанные границы всегда будут видны пользователю и само фоновое изображение сместиться. Также можно задавать данные значения через пикселы. Например, вместо первого параметра пишем 150px и тогда изображение сдвинется вправо на указанное число единиц.
  4. margin: 4% 4% 4% 4%. Такой способ указания отступов позволит даже в маленьком окне браузера сохранить расстояние между краями вкладки и блоком с текстом.

Выбирайте картинки только большого размера и хорошего качества, чтоб при масштабировании фон не размывался.

Во втором способе создания резинового фона используется ключевое свойство cover, которое появилось в спецификации css3.

Замените у background- size параметры 100% auto на cover и оцените результат.

На этом у меня все. Если вам понравилась публикация, то обязательно подписывайтесь на обновления моего блога, а также делитесь впечатлениями и новыми знаниями с друзьями. Пока-пока!

С уважением, Роман Чуешов

 

 

Загрузка...

Прочитано: 303 раз

.

Как растянуть заголовок на фоне веб-страницы с помощью CSS

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Как сделать круговой фон с помощью CSS?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Как сделать фон прозрачным в Photoshop

В этом практическом руководстве мы рассказали, как сделать фон прозрачным в Photoshop, чтобы вы могли изолировать любой объект и использовать его более гибко.

Как сделать фон прозрачным в Photoshop
Часто растровые иллюстрации или логотипы имеют неприглядный белый фон, что бесполезно, если вы хотите разместить объект на веб-сайте или в брошюре.

Для устранения фона (т.е.е. сделайте его прозрачным), сначала перейдите на панель Layers и скопируйте слой изображения. Просто перетащите свой слой на значок «Новый слой» (он выглядит как белый квадрат со загнутым углом) в нижней части панели.

Затем перейдите на панель инструментов и выберите Magic Wand (или нажмите клавишу W). Щелкните фон, и вы увидите пунктирные линии вокруг объекта и краев изображения. Теперь вернитесь к исходному фоновому слою на панели «Слои» и щелкните значок в форме глаза, чтобы сделать слой невидимым.Мы рекомендуем сохранить этот исходный слой в проекте на тот случай, если вы захотите вернуться к нему позже.

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

Чтобы отменить выбор объекта, нажмите Ctrl + D (или Command + D на Mac), и пунктирные линии также исчезнут. Теперь вы можете использовать объект как отдельную графику, не беспокоясь о фоне.

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

Сначала создайте новый фоновый слой, выбрав инструмент «Прямоугольник» и нарисовав фигуру, охватывающую размеры вашего проекта.Выберите цвет фона, который контрастирует с предыдущим фоном, чтобы вы могли четко видеть оставшиеся области. Убедитесь, что ваш новый фон указан под слоем логотипа на панели «Слои».

Выделив слой с логотипом, щелкните инструмент «Масштаб» и увеличьте масштаб оставшихся областей фона, чтобы они были более заметными на экране. Затем снова выберите Волшебную палочку, щелкните оставшиеся области и удалите их одну за другой.

Если вам нужно быстрое решение и у вас нет доступа к Photoshop, вы также можете удалить фон в своем изображении в редакторе Shutterstock.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий