Щоб встановити повний фон сторінки в CSS, використовувати властивості background-size і background-position. Якщо для параметра background-size встановлено значення cover , зображення буде масштабовано, щоб охопити весь контейнер. Потім ви можете керувати вертикальним вирівнюванням зображення за допомогою властивості background-position.
Магія відбувається з властивістю background-size: розмір фону: обкладинка; cover повідомляє браузеру переконатися, що зображення завжди покриває весь контейнер, у цьому випадку html . Браузер закриє контейнер, навіть якщо йому доведеться розтягнути зображення або трохи обрізати краї.
Щоб розтягнути фонове зображення на весь вікно перегляду, ви можете використовувати 100vw для ширини та 100vh для висоти. У цьому прикладі розмір фону: 100vw 100vh; розтягне фонове зображення, щоб охопити весь вікно перегляду, як по ширині, так і по висоті. Зображення регулюватиметься самостійно зі зміною розміру вікна перегляду.
- height:100% Перед встановленням властивості height на 100% усередині . …
- висота: 100в. . …
- позиція: абсолютна. Ви також можете використовувати абсолютну позицію, а також встановити значення 0 пікселів для всіх сторін вікна перегляду (верхня, права, нижня, ліва), що призведе до того, що div розгорнеться на весь екран.
Якщо ви хочете змінити весь фон вашої веб-сторінки, вставте вбудований CSS у початковий тег <body> так:
- HTML. <body style="background-color: #FF474C;"> <!– …
- CSS. body { колір фону: світло-зелений; } h2, p, кнопка { колір фону: світло-блакитний; } …
- HTML. <div class="example"> <p>Це деякий текст CTA.</ …
- CSS.
Вам потрібен background-size:cover, якщо ви хочете охопити всю область. Значення 'contain' просто гарантує, що все підійде, але буде меншим за вікно перегляду, якщо випадково воно не матиме того самого співвідношення сторін.
Якщо ви хочете додати фонове зображення в HTML за допомогою атрибута background, виконайте такі дії:
- Відкрийте файл HTML у текстовому редакторі.
- У початковому тезі <body> у файлі Html введіть <Body background=” “>
- Вкажіть шлях до зображення, яке ми хочемо додати. …
- Збережіть файл Html у текстовому редакторі та запустіть файл.