component background

Компонентная вёрстка

CSS-компонент "Background image"

Компонент отображает указанное изображение на половину высоты окна просмотра

и ниже выводит текст, который передается через атрибут message

html

<section class="component" message="Welcome">
  <figure class="component__figure component__figure--1">
  </figure>
</section>

css

body, html {
    margin: 0;
}

.component {
    height: 100vh;
    margin: 0;
    text-align: center;
}

.component:after {
    content: attr(message);
    font-family: Arial;
    font-size: 7vmin;
    font-weight: bold;
    color: #550;

}

.component__figure {
    height: 50%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    margin: 0 0 1rem 0;
}

.component__figure--1 {
    background-image: url("https://images.pexels.com/photos/1089168/pexels-photo-1089168.jpeg");
}
.component__figure--2 {
    background-image: url("https://images.pexels.com/photos/371589/pexels-photo-371589.jpeg");
}

---

Изменим предыдущий пример с использованием модификаторов:

CSS

body, html {
    margin: 0;
}

.component {
    height: 100vh;
    margin: 0;
    text-align: center;
    --text-color: attr(color);
}

.component:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: attr(mess);
    font-family: Arial;
    font-size: 10vmin;
    font-weight: bold;
    variant: attr(variant);
}

.component--1:after {
    content: "Welcome";
    color: #550;
}
.component--2:after {
    content: "Nature";
    color: #fff;
    text-shadow: 2px 2px 3px #00000090;
}
.component figure {
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    margin: 0 0 1rem 0;
}

.component--1 figure {
    background-image: url("https://images.pexels.com/photos/1089168/pexels-photo-1089168.jpeg");
}
.component--2 figure {
    background-image: url("https://images.pexels.com/photos/371589/pexels-photo-371589.jpeg");
}

html

<section class="component component--1">
  <figure></figure>
</section>

^{Мы можем выбрать модификацию компонента, что позволяет не только изменить фоновую картинку, но и текст, и цвет текста}