In this tutorial we are going to learn how to put a background image in HTML with css. This is very useful for adding a background image in a div or the entire page. Read on to learn how to do it.
Table of Contents
How to put a background image in a div
Through CSS, it is possible to put a background image to any HTML element. In this case, we will do the tutorial with a div.
1. Define the HTML structure
The structure of HTML is simple, we only have to define a class for the div. In this case, the class is “div-with-background”.
<div class="div-con-fondo"></div>
two. Specify the background image with CSS
Now, we just need to define the background image in CSS. This is done with the background-image property, as follows:
.div-con-fondo{
background-image: url('URL-DE-IMAGEN');
}And ready! you already have a div with background image. Remember to replace URL-OF-IMAGE with the URL of the image you want to use as the background.
Alternative: Use inline CSS
If you just want to use inline CSS along with HTML elements, you can do it through the style attribute.
<div style="background-image: url('URL-DE-IMAGEN');"></div>How to put a background image on the whole page
Putting the background image on the entire page is as simple as doing it in a div. The only difference is that the CSS must be applied to the body element. The body is the element that encompasses the entire page. So, we just need to apply the following CSS:
body{
background-image: url('URL-DE-IMAGEN');
}Take into account that we are applying the CSS to the element and not to a class. In the same way, we can do the same but with inline CSS:
<body style="background-image: url('URL-DE-IMAGEN');"></body>Additional background properties in CSS
Now that you’ve learned the basics of how to set a background image, you may want to define what the background image looks like. For that, you have the properties that define other characteristics of the fund. They are as follows:
- background-repeat: Specifies how the image will be repeated throughout the background. The most common values are: no-repeat, repeat, repeat-x, repeat-y.
- background-attachment: Specifies whether or not the background image scrolls when the user scrolls. The most common values are: scroll, fixed.
- background-position: Defines the position of the background image.
- background-size: Defines the size of the background image. It can be: auto, cover, contain or specify percentage.
When using the property background-attachment, we can mimic the Parallax effect in a background image with CSS. On the other hand, by default if the image is smaller than the entire background, it will be repeated, and you can change this with: background-repeat: no-repeat.
The background-size property has two main values: cover and contain. With cover The image will fit across the entire container, no matter if it’s stretched or cropped a bit. With contain, the image will be displayed in its actual size, regardless of whether it does not cover the entire container. I show you a background-size example following:
Difference between background-size contain and cover by regardis (@regardis)
on CodePen.
Don’t worry if you still don’t understand how to make the background image look the way you want it. We are sure that with a little practice, you can get great results. We recommend using an online HTML and CSS editor and testing.
You might also be interested …
How to put comments in HTML
How to make a round button in CSS
How to modify opacity of modal in Bootstrap?
How to create links within the same page with HTML?
How do VW and VH viewport units work in CSS?
