How to put a background image in HTML

by

You can specify a background image for nearly any HTML element. Use the CSS background-image property and the HTML style attribute to add a background image to an HTML element:

<div style="background-image: url('img_girl.jpg');"></div>

Additionally, you can set the background image in the <head> section of the <style> element. In the <style> element, specify the background image:

<style>
p {
  background-image: url('img_girl.jpg');
}
</style>

You must specify the background image on the <body> element if you want it to appear on the entire page. Include a background image that spans the whole page:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

The image will repeat both horizontally and vertically if the background image is smaller than the element until it reaches the end of the element:

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

Set the background-repeat property to no-repeat to prevent the background image from repeating itself:

<style>
body {
  background-repeat: no-repeat;
  background-image: url('example_img_girl.jpg');
}
</style>

You can set the background-size property to cover if you want the background image to fill the entire element. The background-attachment property should be set to fixed to guarantee that the entire element is always covered:

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

You can set the background-size property to 100% 100% to make the background image stretch to fill the element completely:

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

Now let’s explore how to use HTML to place a background image behind text.

In order to set the image as the text background in this article, we will use HTML and CSS. There are CSS properties that are used to set the image in the text background. To set the image as the text’s background, use the CSS property.

You can set an image as the background by using the background-image property. By using the -webkit-text-fill-color property, the text can be made transparent. This completes the clipping effect by allowing the background image to show through the text.