logo

Розмір фону в CSS

вступ

Ми можемо визначити розмір фонового зображення за допомогою властивості background-size. Ми можемо зробити зображення лівим, розтягнутим і підійти до наявного простору. Існує так багато синтаксису для реалізації властивості розміру фону. Ми можемо встановити властивість властивості background-size за допомогою значень і одиничних значень.

У одиничних значеннях ми можемо визначити властивість розміру фону у формі відсотків або пікселів. Ми також можемо визначити це за допомогою глобального значення. Ми можемо реалізувати це за допомогою глобального значення за допомогою наведеного нижче фрагмента.

float до рядка
 .card-hero inherit 

Коротко розберемося в темі.

Значення ключових слів

Ми можемо використовувати значення ключового слова за допомогою cover і contain. Ми можемо змінити розмір фону за допомогою цих значень ключових слів.

1. Обкладинка:

Ми можемо встановити розмір фону за допомогою ключового слова cover. Якщо ми визначимо розмір фону як обкладинку, то зображення поміститься в контейнер, не залишаючи місця. Це також покращить зображення відповідно до розміру екрана.

Давайте зрозуміємо це за допомогою наведеного нижче прикладу.

приклад 1:

код:

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

Вихід

список програм python
Розмір фону в CSS

Пояснення:

У наведеному вище коді три фонові зображення поєднуються за допомогою властивості background-image. Властивість background-size визначає розміри для кожного фонового зображення: 30% ширини для першого зображення, 40% ширини для другого зображення та покриття для третього зображення. Властивість background-position встановлюється окремо для кожного зображення, щоб створити збалансовану композицію.