Как сделать фон сайта bootstrap 5
Передайте смысл с помощью background-color и добавьте украшения с помощью градиентов.
Фоновый цвет
Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color , так что в некоторых случаях вам понадобится утилиты .text-* .
Фоновый градиент
При добавлении класса .bg-gradient к фону добавляется линейный градиент в качестве фонового изображения. Этот градиент начинается с полупрозрачного белого цвета, который постепенно исчезает к низу.
Вам нужен градиент в вашем собственном CSS? Просто добавьте background-image: var(—bs-gradient); .
Непрозрачность
Начиная с версии 5.1.1, утилиты background-color генерируются с помощью Sass с использованием переменных CSS. Это позволяет изменять цвет в реальном времени без компиляции и динамических изменений альфа-прозрачности.
Как это устроено
Рассмотрим нашу стандартную утилиту .bg-success .
Мы используем RGB-версию нашей переменной CSS —bs-success (со значением 25, 135, 84 ) и добавляем вторую переменную CSS, —bs-bg-opacity , для альфа-прозрачности. (со значением по умолчанию 1 благодаря локальной переменной CSS). Это означает, что каждый раз, когда вы сейчас используете .bg-success , вашим вычисленным значением color будет rgba(25, 135, 84, 1) . Локальная переменная CSS внутри каждого класса .bg-* позволяет избежать проблем с наследованием, поэтому вложенные экземпляры утилит не имеют автоматически измененной альфа-прозрачности.
Пример
Чтобы изменить эту непрозрачность, переопределите —bs-bg-opacity с помощью пользовательских стилей или встроенных стилей.
Bootstrap 5 Background Image
Setting a background image in Bootstrap can seem troublesome, especially for novice web developers. Thanks to this tutorial, you will not only learn how to use this functionality without any problems, but you will also learn advanced tricks that will allow you to create truly amazing projects with unconventional design.
Also, try these ready-to-use templates to see how you can implement the background image in a real project.
Video tutorial
Basic example
This is a basic example of a full-page background image. If you need a background image with different settings have a look at other sections of this docs.
- Add background-image via inline CSS.
- Define the background height. In the example below we use vh units, which stands for «viewport height» ( height: 100vh means 100% of available height.)
- Add .bg-image class to scale the image properly and to enable responsiveness
How it works
You can easily set the background image in each HTML element by adding a single line of CSS:
Inside of the url(») we need to provide a link to our image.
If you want to use the image on your computer, the path should look like this:
| Path | Description |
|---|---|
| img src=»https://mdbootstrap.com/docs/standard/content-styles/background-image/picture.webp» | The «picture.webp» file is located in the same folder as the current page |
| img src=»https://mdbootstrap.com/docs/standard/content-styles/background-image/images/picture.webp» | The «picture.webp» file is located in the images folder in the current folder |
| img src=»https://mdbootstrap.com/images/picture.webp» | The «picture.webp» file is located in the images folder at the root of the current web |
| img src=»https://mdbootstrap.com/docs/standard/content-styles/picture.webp» | The «picture.webp» file is located in the folder one level up from the current folder |
You can also use an absolute path and add a link to the image directly from the Internet.
Then we just need to add this CSS line to the HTML element.
However, despite this, our picture does not appear. Take a look at the demo:
That’s because we need to provide a height to this HTML element. Let’s add height: 400px; to set a height.
Now it works . partially. We see the picture, but it is cut and unsightly.
Click on the images to launch the live demo.
Fortunately, there is a class in MDBootstrap that fixes this issue. Just add .bg-image to the class and you will see the problem magically disappear.
Full page background image
Now we can easily make this background image to cover the full available space and make it a full-page background image.
Just replace height: 400px; with height: 100vh;
vh stands for viewport height.
height: 100vh; means 100% of available height.
Note: If you want to stretch the image to the full available height and width remember to use the image with enough high resolution. However, be careful not to overdo it. Heigh-resolution images weigh a lot and can slow down your website.
Half page background image
You can also stretch the background image half page (or any other percentage). Just replace «height: 100vh» with «height: 50vh» .
This is a very useful design that is often used in many landing pages.
Jumbotron with background image
In bootstrap 5 there is no dedicated jumbotron component, but it’s not a problem at all. You can easily create your own component by using available classes.
Cards with background image
Using the same technique as with the jumbotron, we can easily create cards with an image in the background.
Как сделать фон сайта bootstrap 5
Передайте смысл с помощью background-color и добавьте украшения с помощью градиентов.
Фоновый цвет
Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color , так что в некоторых случаях вам понадобится утилиты .text-* .
Фоновый градиент
При добавлении класса .bg-gradient к фону добавляется линейный градиент в качестве фонового изображения. Этот градиент начинается с полупрозрачного белого цвета, который постепенно исчезает к низу.
Вам нужен градиент в вашем собственном CSS? Просто добавьте background-image: var(—bs-gradient); .
В дополнение к следующей функциональности Sass, рассмотрите возможность чтения о наших включенных настраиваемых свойствах CSS (также известных как переменные CSS) для цветов и многого другого.
Переменные
Большинство утилит background-color генерируются цветами нашей темы, переназначенными из переменных нашей общей цветовой палитры.
Также доступны оттенки серого, но для создания каких-либо утилит используется только подмножество.
Карта
Затем цвета темы помещаются в карту Sass, чтобы мы могли перебирать их, чтобы сгенерировать наши утилиты, модификаторы компонентов и многое другое.
Цвета в градациях серого также доступны в виде карты Sass. Эта карта не используется для создания каких-либо утилит.
Миксины
Никакие миксины не используются для создания наших фоновых утилит, но у нас есть некоторые дополнительные миксины для других ситуаций, когда Вы хотите создать свои собственные градиенты.