How to make bootstrap background picture

There are two ways to set the Bootstrap background image: use CSS rules to add a background image: background-image: url(path/to/image.png); use the utility class to add .bg-image, and add it in the style Define rules in the table, including background image path, size, and repeat settings.

Bootstrap background image setting

In Bootstrap, setting the background image is very simple. Two methods are introduced below:

Method 1: Use CSS rules

1. Add the following CSS rules to the elements to which background images are to be applied:

<code class="css">background-image: url(path/to/image.png);</code>

2. Replace path/to/image.png with the path to the image you want to use.
3. You can set other background properties as needed, such as:

<code class="css">background-size: cover;
background-repeat: no-repeat;</code>

Method 2: Use Bootstrap utility class

1. as To apply a background image to the element add the following utility class:

<code class="html"><div class="bg-image"></div></code>

2. In the style sheet, add the following rule for the .bg-image class:

<code class="css">.bg-image {
  background-image: url(path/to/image.png);
  background-size: cover;
  background-repeat: no-repeat;
}</code>

Note:

• The path of the background image can be an absolute path or a relative path relative to the current HTML document.
• You can use media queries to load different background images for different device sizes.
• You can also use the background-position attribute to control the position of the background image in the element.

The above is the detailed content of How to make bootstrap background picture. For more information, please follow other related articles on the PHP Chinese website!