Как добавить background image в html
Перейти к содержимому

Как добавить background image в html

  • автор:

How to Add Background Image with CSS

Let us demonstrate how you can add and position a background image in an HTML document with CSS styles.

How to position a background image.

  • background-image: defines one or more background images for the element.
  • background-repeat: specifies if/how a background image is repeated.
  • background-attachment: defines whether a background image scrolls with the rest of a page or is fixed.
  • background-position: defines the starting position of a background image.

Example of adding a background image:

html> html> head> title>Title of the document 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>

Result

In the example above, the background image is positioned in the center (you can also use other values such as left top; left center; left bottom; right top; right center; right bottom; etc.).

Here are some ways of positioning a background image:

  • Repeat (vertically or horizontally)
  • No repeat
  • Full page

To repeat a background image, you can use the following values:

  • repeat, which repeats the background image vertically and horizontally,
  • repeat-x, which repeats the background image only horizontally,
  • repeat-y, which repeats the background image only vertically.

Is it possible to add a background image without a URL From the Computer?

Unfortunately, it is not possible to add a background image to a webpage without specifying the image’s URL. This is because web browsers need to know where to locate the image file in order to display it on the page.

Unfortunately, it is not possible to add a background image to a webpage without specifying the image’s URL. This is because web browsers need to know where to locate the image file in order to display it on the page.

Example of adding a background image repeated vertically:

html> html> head> title>Title of the document 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>

In the example above, the background image is repeated only vertically.

Use the «no-repeat» value so as the background image won’t be repeated (the image will only be shown once).

Example of adding a non-repeated background image:

html> html> head> title>Title of the document 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>

CSS3 introduced the background-size property, which helps us to control the background-image size as displayed in its parent element. In the following example, as a background-size value, we use “cover”, which scales the background image as much as possible so that the background image entirely covers the area.

To create a full-page background image, also add a background image to the container with the height set to 100%.

Example of adding a full-page background image:

html> html> head> title>Title of the document 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>

To add a transparent background image, you need the opacity property, which specifies the transparency of an element. Take a value from 0.0-1.0. to decrease the transparency (e.g. 0.2 is hazy, 0.5 makes half transparent).

Example of adding a background image with a specified opacity:

html> html> head> title>Title of the document title> style> img < opacity: 0.5; > style> head> body> img src="https://www.w3docs.com/uploads/media/default/0001/01/477719675fecaac0362957c214fb9aa56fca99b5.jpeg" width="300" height="150" alt="w3docs"> body> html>

In the example above, the image has 50% opacity.

HTML Background Images

A background image can be specified for almost any HTML element.

Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Example

Add a background image on a HTML element:

You can also specify the background image in the element, in the section:

Example

Specify the background image in the element:

Background Image on a Page

If you want the entire page to have a background image, you must specify the background image on the element:

Example

Add a background image for the entire page:

Background Repeat

If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:

Example

To avoid the background image from repeating itself, set the background-repeat property to no-repeat .

Example

Background Cover

If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):

Example

Background Stretch

If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100% :

Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.

Example

HTML Exercises

Learn More CSS

From the examples above you have learned that background images can be styled by using the CSS background properties.

To learn more about CSS background properties, study our CSS Background Tutorial.

Можно ли сделать так, чтобы картинка background-image не обрезалась, выходя за пределы элемента?

Как сделать так, чтобы картинка в background-image не обрезалась, выходя за пределы элемента, у которого установлено это свойство?

some text

.background

То есть, чтобы image.jpg не обрезалась, выходя за пределы p ? DEMO
Отслеживать
7,319 5 5 золотых знаков 28 28 серебряных знаков 72 72 бронзовых знака
задан 11 мар 2015 в 16:49
151 1 1 золотой знак 1 1 серебряный знак 11 11 бронзовых знаков
Уточните. Она и не выйдет за пределы.
11 мар 2015 в 16:52
Еще как варант задать элементу паддинг с той стороны в которую вы хотите сдвинуть картинку
6 мая 2016 в 7:59

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

Если кратко — нельзя.

Можно элементу min-width и min-height поставить согласно размерам картинки.

Если хотите, чтобы картинка выходила за пределы элемента, то расположите ее абсолютно в блоке.

Отслеживать
ответ дан 11 мар 2015 в 16:50
2,868 12 12 золотых знаков 57 57 серебряных знаков 103 103 бронзовых знака

Ну чтобы ничего никуда не вылазило за пределы с жестко указанными размерами для div не возможно. Поскольку это обычная геометрия и ее законы. Но сделать так чтобы лишнее пряталось и размер картинки не менялся возможно.

1) Ставим картинку в сам див, или что там у вас.

2) Делаем стили блоку.

.my-some-class

Недостаток подхода в том что width и height указывать нужно обязательно. Чтобы разместить текст над картинкой, ставим ей абсолютное позиционирование. И текст под картинку.

Как использовать несколько фоновых изображений с помощью CSS

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

Список значений background-position и/или background-repeat, которые разделены через запятые, задают положение и повторение соответственно для нескольких фоновых изображений:

div < background-image:url(image1), url(image2), url(image3); background-position:center right, right bottom, center top; background-repeat:no-repeat, repeat-y, repeat-x; >

В данном примере image1 имеет положение center-right и не повторяется, image2 имеет положение right bottom и повторяется по вертикали, а image3 имеет положение center top и повторяется по горизонтали.

Это один из способов установления нескольких изображений. Можно установить изображение с помощью свойства background-image, потом указать положение изображения с помощью свойства background-position и указать повторение изображений с помощью свойства background-repeat.

Второй способ добавления нескольких изображений это использование свойства background:

div < background: url("image1") no-repeat center bottom, url("image2") no-repeat center top , blue; >

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

Давайте узнаем, как можно пошагово создать несколько фоновых изображений с помощью CSS!

  1. Выберите три изображения. Они должны иметь небольшой размер, чтобы вы смогли увидеть, как работают свойства background-position и background-repeat.
  2. Создайте простой HTML документ с элементом .
  3. Примените стиль к элементу и не забудьте задать для него ширину и высоту.

А сейчас увидим результат!

Пример

html> html> head> title>Заголовок документа title> style> .example < width: 100%; height: 500px; background: url("http://www.cliparthut.com/clip-arts/26/vista-aero-pack2-transparent-png-icon-download-free-vector-clipart-M3rZlU.png") no-repeat 10% 110%, url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png") no-repeat 120% 700% , #002054; > style> head> body> div class="example"> div> body> html>

Рассмотрим другой пример:

Пример

html> html> head> title>Заголовок документа title> style> #example< margin:0; padding:0; position: absolute; top: 0; left:0; bottom: 0; width: 100%; height: 70%; background-image: url("https://userscontent2.emaze.com/images/d56242ef-c20d-4350-9877-321cb4523328/7c5cdc4d9f6bf00f3fb279f51d7d23fc.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/239518/birds2.svg"), url("http://www.transparentpng.com/thumb/clouds/W5czgG-blue-clouds-png-icon.png"), linear-gradient(to bottom, rgba(255,255,255,0), 40%,rgba(255,255,255,1) 60%); background-size: 20%, 20%, 100%, 100%, 50px; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x,repeat; background-position: 5% 40%, 95% 60%, center bottom; > > style> head> body> div id="example"> div> body> html>

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

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