<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Свойство CSS background-image в веб-дизайне

Свойство CSS background-image в веб-дизайне

Каждый знает эту знаменитую фразу: "Театр начинается с вешалки". А с чего начинается веб-сайт? Представьте себе, что у вас много идей в голове, которыми вы хотите поделиться с миром, то есть вы хотите стать блогером. Идеи это хорошо, но сразу встает вопрос: "А как будет выглядеть мой блог, какая цветовая гамма, фон?".

И здесь мы подошли к главному, перефразируем так: "Сайт начинается с фона". Большинство блогеров делают "классические блоги" с белым фоном, но мы пойдем другим путем. Пройти мимо замечательного свойства CSS background-image, мы никак не можем.

А что оно делает? Это свойство CSS background-image вставляет картинку в качестве фона в разные элементы HTML-страницы. Оно не ограничивается только тегом body, а широко применяется в оформлении сайта, например для: div, li, p, table, header, footer.

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url ("css-background-image-01.jpg");
  background-color: #lightblue;
}
</style>
</head>
<body>
<h1>Дизайн сайта начинается с фона.</h1>
</body>
</html>

Будет корректным прописать цвет у фона – свойство background-color, для подстраховки, если не загрузится картинка. В скобочках url () указать путь до папки с картинками.

Свойство CSS background-image в веб-дизайне

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

Простой вариант, чтобы избавиться от "кафельности", это использовать картинку с большими размерами, не менее 1024 px в ширину,чтобы она заполнила собой весь экран. Тоже будет хорошим решением найти бесшовную текстуру, при размножении которой, рисунок будет как одно целое.

Как сделать фон более привлекательным?

Слава богу у нас для этого есть помощники:

  • no-repeat – запретить повтор
  • repeat-x – повторение рисунка только по горизонтали
  • repeat-y – повторение рисунка только по вертикали

Например:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("css-background-image-gradient.png");
  background-color: #white;
  background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Шапка блога</h1>
<p>Это фоновая текстура с повторением только по горизонтали</p>
</body>
</html>

Свойство CSS background-image в веб-дизайне

Следующий помощник - свойство background-position, позволяет позиционировать фоновую картинку в любом месте экрана. Этот прием широко распространен в современном веб-дизайне. У нас есть картинка, но она не часть контента, а служит лишь как украшение сайта.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("css-background-image-02.jpg");
  background-color: #ebebec;
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Пример неповторяющегося фона с заданным позиционированием.</p>
<p>Картинка отображается только один раз и находится справа.</p>
<p>Задан отступ от правого края в 200 px во избежании наезда текста на фон.</p>
</body>
</html>

Свойство CSS background-image в веб-дизайне

Если мы хотим, чтобы картинка всегда была видна при прокрутки экрана вниз, надо добавить в код выше свойство - background-attachment: fixed;

В чем разница между img и background-image?

Разница принципиальная, тег img вставляется непосредственно в тело HTML-страницы и отвечает за содержание (иллюстрации, фотографии, аватарки), несет смысловую нагрузку. Очень важно, чтобы картинка была проиндексирована поисковыми системами и попала в поисковую выдачу. Свойства CSS background-image – делают сайт уникальным и красивым, то есть это оформление, которое следует выносить во внешний файл CSS стилей или использовать внутри элемента style.

Конечно, это не значит, что background-image не будет работать, если его поместить в тело HTML-страницы. Но я настоятельно рекомендую все, что касается дизайна выносить в CSS. В результате мы получим чистый HTML-код:

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

Ну вот мы и рассмотрели более-менее все варианты с использованием свойства CSS background-image. Побольше практики друзья! Смело копируйте код и придумывайте свои варианты!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.