Как добавить фоновое изображение
В этой статье мы покажем, как добавить и позиционировать фоновое изображение в HTML-документе, используя стили CSS.
Как позиционировать фоновое изображение
- background-image: (устанавливает одно или несколько фоновых изображений для элемента)
- background-repeat: (устанавливает, должно ли повторяться фоновое изображение, а если повторяется, то каким образом)
- background-attachment: (устанавливает, прокручивается ли фоновое изображение со всей страницей, или оно фиксированное)
- background-position: (устанавливает начальную позицию фонового изображения)
Пример
html> html> head> title>Заголовок документа title> style> body < background-image: url('https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; style> head> body> body> html>В этом примере фоновое изображение расположено в центре. Можете также выбрать другие значения, например, left top; left center; left bottom; right top; right center; right bottom; и т.д.
Несколько способов позиционирования фонового изображения:
- Повторять вертикально или горизонтально
- Не повторять
- Отображать на всю страницу
- repeat (фоновое изображение повторяется и по вертикали, и по горизонтали)
- repeat-x (фоновое изображение повторяется только по горизонтали)
- repeat-y (фоновое изображение повторяется только по вертикали)
Пример
html> html> head> title>Заголовок документа title> style> body background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg"); background-repeat: repeat-y; > style> head> body> body> html>В этом примере фоновое изображение повторяется только по вертикали.
Используйте значение no-repeat, чтобы фоновое изображение не повторялось (изображение отображается только один раз).
Пример
html> html> head> title>Заголовок документа title> style> body < background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg"); background-repeat: no-repeat;> style> head> body> body> html>Для того, чтобы создать фоновое изображение на всю страницу с помощью CSS, добавьте фоновое изображение к контейнеру, задав height: 100%.
Пример
html> html> head> title>Заголовок документа title> meta name="viewport" content="width=device-width, initial-scale=1"> style> body, html < height: 100%;margin: 0;> .bg < /* Использованное изображение */ background-image: url("https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg"); /* Полная высота */ height: 100%; /* Центрируйте и масштабируйте изображение правильно */ background-position: center; background-repeat: no-repeat; background-size: cover; > style> head> body> div class="bg"> div> body> html>Для того, чтобы получить прозрачное фоновое изображение, используйте свойство opacity, которое указывает прозрачность элемента. Выберите значение в пределах 0.0-1.0. , чтобы снизить степень прозрачности (например, 0.5 делает изображение полупрозрачным).
Пример
html> html> head> title>Заголовок документа title> style> img < opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */> style> head> body> img src="https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg" width="300" height="150"> body> html>В вышеприведенном примере изображение имеет прозрачность 50%.
В IE8 и более старых версиях используется filter:alpha(opacity=x), где можно задать значение в пределах 0-100.
Как поставить фоновое изображение по центру
Верстаю сайт. В макете была такая секция: фоновое изображение и белый фон. Выставляю background:url(. ) center(т.к по умолчанию картинку почему то тянет левее.) Но когда ставлю center, картинка просто исчезает. Помогите пожалуйста как поставить такой фон.
Отслеживать
задан 12 дек 2021 в 13:31
user469181 user469181
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
.block < width: 150px; height: 150px; border: 1px solid black; background: url("https://i.pinimg.com/474x/b9/15/d9/b915d9e4c116db9b934aa0cc01d02241.jpg") no-repeat; background-size: 75px 75px; background-position: 50% 50%; >Отслеживать
2,114 1 1 золотой знак 11 11 серебряных знаков 18 18 бронзовых знаков
ответ дан 12 дек 2021 в 13:38
37.2k 4 4 золотых знака 27 27 серебряных знаков 70 70 бронзовых знаков
Без кода ничего непонятно, но, если вы про треугольник внизу — то это не background-image
Делаете блок, делаете ему :after и по центру ставите треугольник с отрицательной позицией вниз.
body, html < margin: 0; padding: 0; >.screen1 < background-color: gray; padding: 30px; position: relative; >.screen1:after < content: ''; position: absolute; bottom: -30px; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid gray; >.screen2
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Как растянуть фоновую картинку
Чтобы управлять размерами фоновой картинки в HTML существует специальное CSS-свойство background-size. С помощью него можно задавать любые размеры изображения. Если Вы знаете CSS, то ищите в Вашем CSS-файле нужный селектор картинки и пишите стили для него. Если не знаете CSS, то писать можно прямо в HTML, например, так:
В этом примере предполагается, что фоновая картинка установлена для этого . Поэтому прописываем background-size именно для него.
В качестве значения можно указывать проценты или пиксели. Можно указать 2 значения, тогда первое будет для размера по горизонтали, а второе — по вертикали. Пример:
Также, в качестве значения можно указать ключевые слова contain и cover. Слово contain уместит всю картинку в . Слово cover заполнит весь картинкой, то есть картинка при этом с одной стороны может не уместиться в div, и будет как будто обрезана.
Чтобы фоновое изображение полностью и хорошо уместилось в HTML-элемент, нужно, чтобы его размеры и пропорции соответствовали элементу.
Добавить комментарий Отменить ответ
Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK
Manage consent
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
| Cookie | Duration | Description |
|---|---|---|
| cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics». |
| cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional». |
| cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary». |
| cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other. |
| cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance». |
| viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Добавление фонового изображения в верхнюю часть HTML-страницы
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
В этом мануале мы покажем, как с помощью контейнера структурировать верхнюю часть веб-страницы. Мы будем использовать атрибут style, чтобы задать высоту контейнера , применить фоновое изображение и указать, что оно должно покрывать всю область контейнера.
Прежде чем мы начнем, нам нужно выбрать фоновое изображение.
Выбранную картинку сохраните в папке images как background-image.jpg.
Затем вставьте выделенный фрагмент кода в файл index.html между открывающим и закрывающим тегом :
Не забудьте заменить Image_Location расположением вашей фоновой картинки и добавить закрывающий тег