How to add background image in html
Adding a background image to your web page can enhance its visual appeal and create a more engaging user experience. There are several ways to add a background image in HTML, each offering different levels of control and customization. In this article, we'll explore various methods to add background images using CSS and Bootstrap classes.
Using Bootstrap
- Add
background-image
via inline CSS. - Define the background height. In the example below we use
vh
units, which stands for "viewport height" (height: 30vh
means 30% of available height.) - Add
.bg-image
class to scale the image properly and to enable responsiveness.
More examples can be found on the background images page.
Hello World
<div class="bg-image d-flex justify-content-center align-items-center" style="background-image: url('path/to/your/image.jpg');
height: 30vh">
<h1>Hello World</h1>
</div>
Using CSS
Inline styles allow you to add a background image directly within the HTML element.
- Set
background-image
to specify the image URL. - Use
background-size: cover;
andbackground-position: center;
for proper image scaling and positioning. - Other CSS properties are used to style and center the content within the container.
Hello World
<div style="
background-image: url('path/to/your/image.jpg');
background-size: cover;
background-position: center;
width:100%; height: 30vh;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
">
<h1>Hello World</h1>
</div>