Background Image

HTML Изображение фон

Фоновое изображение может быть задано практически для любого HTML элемента.

Фоновое изображение на HTML элементе

Чтобы добавить фоновое изображение в HTML элемент, используйте атрибут HTML style и CSS свойство background-image :

Пример

Добавление фонового изображения на HTML элемент:

Вы также можете указать фоновое изображение в элементе в разделе :

Пример

Задания фонового изображения в элементе :

Фоновое изображение на странице

Если вы хотите, чтобы вся страница имела фоновое изображение, вы должны указать фоновое изображение в элементе :

Пример

Добавьте фоновое изображение для всей страницы:

Фоновый повтор

Если фоновое изображение меньше элемента, то изображение будет повторяться по горизонтали и вертикали, пока не достигнет конца элемента:

Пример

Чтобы фоновое изображение не повторялось, установите для свойства background-repeat значение no-repeat .

Пример

Фоновая обложка

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

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

Таким образом, фоновое изображение будет покрывать весь элемент, не растягиваясь (изображение сохранит свои первоначальные пропорции):

Пример

Фоновая растяжка

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

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

Пример

Узнайте больше о CSS

Из приведенных выше примеров вы узнали, что фоновые изображения можно стилизовать с помощью свойств фона CSS.

Чтобы узнать больше о свойствах фона CSS, изучите наши CSS Background Учебник.

Мы только что запустили
SchoolsW3 видео

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

HTML Background Image – How to Add Wallpaper Images to Your Website

Ihechikara Vincent Abba

Background images can help beautify websites and make them more attractive to users.

In this article, you’ll learn:

• How to add a background image to your website using the CSS background-image property.
• Other CSS background properties for images.

How to Add Wallpaper Images to Your Website

When coding a website, using an image as the background image of the website is different from inserting an image in HTML using the img element.

To use an image as the background of your website, you’ll use CSS.

      
Background image
  

We have two code blocks above — the HTML code displays text that says «Background image» on the webpage while the CSS code centers the text on the page.

To add a wallpaper image to the website — one that covers the entire page — you have to write some CSS rules for the body element. Here’s how:

In the code above, we’re using the background-image property to add an image to the body of the webpage. The path/location of the image is passed in as a parameter to the url() function: url(‘bg-image.jpg’) .

Here’s what the webpage looks like now:

What if the Background Image Is Smaller Than the Browser Window?

In situations where the image is smaller than the browser, the image is repeated a couple 0f time to cover up the spaces that remain.

This repetition doesn’t look great for every picture. Here’s what a smaller version of the image used in the previous section looks like in the browser:

The image has been split into four uneven parts. Unless this is the effect you’re looking for, you can fix it using the background-repeat property.

Here’s how to fix the image repetition problem:

In the code above, we assigned a no-repeat value to the background-repeat property.

Here’s what the webpage looks like now:

The image is no longer being repeated across the page but we have a new problem — the image no longer covers the whole page.

To fix that, we use the background-size and background-attachment properties:

Setting the value of the background-size property to cover makes the image cover the whole element (the body /entire page in our case).

With the fixed value of the background-attachment property, the image’s position is fixed. This way it remains in the same position even when you scroll across the page.

The downside of stretching out a small image to cover the entire page is that the image loses quality and becomes blurry as its being stretched. In this case, you should consider that before using a small image as the background image for your website.

Summary

In this article, we talked about adding wallpaper images to a website.

You can add a background image to your website using the CSS background-image property.

We also learned how to use other CSS background properties like background-repeat , background-size , and background-attachment .

Источник

Html for wallpaper backgrounds

• Difference between HTML and CSS
• What are physical tags in HTML?
• HTML | Deprecated Tags
• Container and Empty Tags in HTML
• HTML Comments
• How to set background image in HTML ?
• How to define a list item in HTML5?
• Difference between semantic and non-semantic elements
• How to Create Color Picker input box in HTML ?
• HTML Hex Color Codes
• HTML Block and Inline Elements
• HTML Drag and Drop
• How to set the name for the object in HTML5?
• How to add space between elements ?
• How to create a clickable button in HTML ?

• HTML Links
• How to link back out of a folder using the a-href tag?
• HTML ping Attribute
• HTML disabled attribute
• What is the use of “#” symbol in link URL ?
• How to create a link with a media attribute in HTML5 ?
• How to specify the source URL of the quote using HTML5 ?
• How to specify that the target will be downloaded when a user clicks on the hyperlink in HTML5 ?
• How to specify the hyperlink target for the area of an image in HTML5 ?
• How to make a HTML link that forces refresh ?
• How to set the language of text in the linked document in HTML5 ?
• How to specify what media/device the target URL is optimized for ?
• How to specify URL of resource to be used by the object in HTML5 ?
• How to use Anchor tag as submit button ?

• Elements of a form Tag
• How to set an alternate text for area in HTML5 ?
• How to specify one or more forms the object belongs to ?
• How to specify one or more forms the keygen element belongs to ?
• How to turn on/off form autocompletion in HTML ?
• How to specify that a group of related form elements should be disabled using HTML?
• How to specify how form-data should be encoded when submitting to server ?
• How to specify the URL that will process the data supplied through input(s) when the form is submitted?
• How to specify one or more forms the label belongs to ?
• How to specify multiple forms the select field belongs to in HTML ?
• How to change the type?
• How to specify which form element a label is bound to ?
• How to create a multiline input control text area in HTML5 ?
• How to create form validation by using only HTML ?

• HTML Emojis
• How to animate a straight line in linear motion using CSS ?
• How to specify the media type of the script in HTML5 ?
• How to display video controls in HTML5 ?
• How to mute video using HTML5 ?
• How to add controls to an audio in HTML5 ?
• Create Scanning Animation Loader using HTML & CSS
• How to specify media type of data specified in data attribute in HTML5 ?
• How to set the height and width of the video player in HTML5 ?
• How to check whether an image is loaded or not ?
• How to specify the type of the media resource in HTML5 ?
• How to Create Image Hovered Detail using HTML & CSS ?
• How to define media type of style tag in HTML5 ?
• How to set multiple media resources for elements in HTML5 ?

• How to set a single line break in HTML5 ?
• How to create a progress bar using HTML and CSS?
• How to create Perspective Text using HTML & CSS ?
• How to isolate a part of text that may be formatted in a different direction using HTML5 ?
• Design an Event Webpage using HTML & CSS
• How to Skew Text on Hover using HTML and CSS?
• Programming a slideshow with HTML and CSS
• How to specify that an option-group should be disabled in HTML5 ?
• How to disable the drop-down list in HTML5 ?
• How to define scalar measurement within a given range in HTML5 ?
• How to set the security algorithm of key in HTML5 ?
• How to set minimum and maximum value of range in HTML5 ?

Источник