Как добавить картинку в css на фон
Перейти к содержимому

Как добавить картинку в css на фон

  • автор:

Наложение фона на картинку с помощью CSS

Как наложить фон на картинку с помощью CSS? Часто на главной странице сайта или ленинг-пейдж размещают картинку на всю ширину и высоту экрана, а сверху добавляют затемняющий фон, поверх которого в дальнейшем располагается заголовок. Давайте добавим не обычный заголовок, а поздравление с наступающим Новым 2019 годом! ��

Далее в примере я использую картинки с сайта http://lorempixel.com/, чтобы вы могли посмотреть результат в песочнице. Картинки генерируются автоматически, поэтому при каждом изменении кода, будет показываться новая картинка.

Добавим в html-файл следующий код:

 

С наступающим
Новым 2019 годом!

Самое важное, что нужно здесь понимать — позиционирование элементов относительно друг друга.

Пишем в css-файле следующий код:

@import url(‘https://fonts.googleapis.com/css?family=Lobster|Open+Sans&subset=cyrillic’); .wrapper < position: relative; // относительное позиционирование width: 100%; height: 100%; >.wrapper__image < background: url('http://lorempixel.com/400/200/nature/') top center no-repeat; // укажите url к своей картинке background-size: cover; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; z-index: 0; >.wrapper:after < content: ''; background: rgba(0,0,0,0.7); // фон с прозрачностью 70% display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; >.wrapper__title

Вы можете внести изменения и посмотреть на результат в песочнице:

Другой вариант наложения фона в виде снега:

Голосов: 2 , Средняя оценка: 5

Как сделать фон сайта картинкой HTML

В прошлой статье мы говорили о том, как изменить цвет фона на сайте с помощью атрибутов тега body и CSS-стилей: Фон в HTML. В текущей статье речь пойдет об использовании изображений в качестве фона на сайте, о том как растянуть фон на всю ширину страницы и зафиксировать его.

Картинка в качестве фона страницы — HTML

Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body:

  Фоновое изображение с помощью HTML  

Здесь фоновое изображение устанавливается с помощью атрибута background тега body.

Как в примере выше, рекомендуется помимо картинки указывать и цвет фона (он будет отображаться на сайте во время загрузки страницы), который будет максимально сочетаться с фоновым изображением и создавать контраст с текстом на сайте. Например, если вы используете белый цвет текста на сайте, то стоит указать темный цвет фона и задать темное фоновое изображение. В таком случает текст будет легко читаться.

Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.

Картинка в качестве фона страницы — CSS

В CSS фоновый цвет и фоновое изображение можно задать одним свойством background:

  Фоновое изображение с помощью CSS   

Здесь фоновый рисунок устанавливается с помощью свойства background CSS (фон картинка CSS).

Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо «сшиваться» по краям.

Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;

В конструкторе сайтов «Нубекс» для любого сайта можно использовать большое изображение в качестве фона и закрепить его.

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

  • Полупрозрачный сайт
  • Фон в HTML
  • Как сделать видео в качестве фона сайта

Не могу добавить картинку на фон

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

Здравствуйте ! Начал изучать HTML и CSS. Выучил основы и решил постараться поверстать свой первый сайт. В итоге, столкнулся с проблемой и не могу ее решить. Я пытаюсь выставить картинку на фон, но ничего не происходит. Подскажите, в чем проблема ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
 html> head> meta charset="UTF-8"> link rel = "stylesheet" href="main.css"> link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:400,700&display=swap&subset=cyrillic-ext" rel="stylesheet"> title>MySite/title> /head> body> div class ="intro"> div class="container"> h1>TiDaYu/h1> /div> /div> /body> /html>
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
body { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.6; color: #2B2B2B; } *, *:before, *:after { box-sizing: border-box; } h1,h2,h3,h4,h5,h6{ margin: 0; } .container { width: 100%; max-width: 1200px; margin: 0 auto; } intro{ width: 100%; height: 100vh; background: url("https://www.cyberforum.ru/images/tema.jpg") center no-repeat; -webkit-background-size: cover; background-size: cover; }

Надеюсь, вы мне поможете. Удачного всем дня

Как добавить фоновый рисунок на веб-страницу?

Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background , которое в свою очередь добавляется к селектору body .

Общий синтаксис добавления фона следующий.

 body 

Путь к графическому файлу будет различаться, в зависимости от того, где он располагается относительно текущего документа. Например, если HTML-документ и рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif) .

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

Пример 1. Добавление фона

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Фон   

.

В данном примере фон веб-страницы задан цветом хаки, а текст — белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *