Как да направите фоново изображение на уебсайт

Съдържание:

Как да направите фоново изображение на уебсайт
Как да направите фоново изображение на уебсайт

Видео: Как да направите фоново изображение на уебсайт

Видео: Как да направите фоново изображение на уебсайт
Видео: Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture. 2024, Може
Anonim

Можете сами да научите основите на изграждането на сайтове; има достатъчно информация по тази тема в интернет и книги. В началния етап обаче често възникват трудности при използването на един или друг етикет. Всъщност най-често срещаните компоненти се запомнят най-добре, тъй като са от съществено значение при писането на който и да е уебсайт.

Как да направите фоново изображение на уебсайт
Как да направите фоново изображение на уебсайт

Инструкции

Етап 1

Изберете снимката, която искате да използвате като фоново изображение. Ако възнамерявате да вмъкнете текст върху илюстрацията, тогава в този случай е препоръчително да се ограничите до опции без прекомерно разнообразие, при които се използват няколко цвята, които са близки по природа. По принцип, за да премахнете вълничките, можете да създадете „фон“за съдържанието - и проблемът ще бъде успешно решен.

Стъпка 2

Коригирайте изображението с помощта на Adobe Photoshop. Когато сте готови, изберете командата Save For Web от менюто File и изберете папката, която искате. Ако това е първото изображение, което се използва за сайта, автоматично се създава папка "Изображения".

Стъпка 3

В маркера напишете атрибута background = "path to image". Пример за запис: или. В същото време имайте предвид, че тагът трябва да се появи само веднъж в кода, той не трябва да се умножава.

Стъпка 4

Запазете промените в бележника, щракнете върху бутона "Refresh" в браузъра. Тапетът ще се появи на екрана. Ако размерите на изображението са по-малки от параметрите на уеб страницата, тогава изображението ще бъде дублирано толкова пъти, колкото е необходимо, за да запълни цялото пространство. Има два начина за коригиране на този недостатък:

• с помощта на програмата Adobe Photoshop задайте необходимите параметри на картината в пиксели („Изображение“- „Размер на изображението“);

• задайте необходимите размери в html-кода.

Например, ако ширината е 1250 px, а височината е 650 px, тогава трябва да добавите необходимите атрибути за клетката на таблицата, в която ще бъде поставена картината.

Не можете да зададете размера в маркера - изображението винаги ще се показва в пълен размер.

Стъпка 5

Аналог на ccs за вмъкване на фоново изображение:

фоново изображение

ТЯЛО {

фоново изображение: url (images / bg.jpg);

}

Атрибутът "background-image: url (images / bg.jpg)" е пътят към фоновото изображение.

Препоръчано: