This content originally appeared on DEV Community and was authored by Binate Noor
Adding a Background Image in HTML is one of the most common tasks when you are working on Web Designing.
As a new web designer, one very skill you'll need to master is using background images.
The following pointers will be covered in this:
1. Background Image in HTML
1. CSS background-image Property
2. Background Cover
3. Two Background Images
4. Background Repeat
5. Using Class
6. Linear-gradient
7. Three Color Gradient
8. Repeating Linear Gradient
9. Radial Gradient
10. Three Color Radial Gradient
11. Repeating Radial Gradient
12. Creating "Hero" image with CSS
Background Image in HTML:
There are various ways in which images can be added to a web page to make it look captivating & appealing. One of such ways is adding a background image. In this blog, I can add background images to a webpage using HTML & CSS. The most common & simple way to add a background image is using the background image attribute inside the
tag.<div style="background-image: url('binateNoor.jpg')";>
</div>
CSS background-image Property:
I will be defining the CSS code inside the "style" tag. I will also look at how to target div tags and class using CSS. In the below example, I am specifying the background-image & background-color CSS property which will set the background image & background property for the HTML body respectively.
<style>
body {
background-image: url("bg1.jpg");
background-color: #cccccc;
}
</style>
Background Cover:
If you want the background image to cover the entire element, you can set the background-size property to cover.
Also, to make sure the entire element is always covered, set the background-attachment property to fixed.
<style>
body {
background-image: url('binateNoor.jpg');
background-repeat: no repeat;
background-attachement: fixed;
background-size: cover;
}
</style>
2 Background Images:
You can also go ahead and add two background images for the "body" element.
body {
background-image: url("bg3.png"), url("bg1.jpg");
background-color: #cccccc;
}
Notes:
The background image by default is added to the left corner & is repeated both ways, i.e. horizontally & vertically.
- The reason why it is preferred to keep a background color is that if the image is unavailable, so the background-color property will be used and the same will be displayed.
Now before understanding how I can use different CSS property values, let’s look at the list of CSS property values associated with the background image.
url: URL to the background image. In case of more than one image, comma-separated list needs are provided.
linear-gradient(): Sets a linear gradient as the background image. Needs at least 2 colors.
radial-gradient(): Sets a radial gradient as the background image. Needs at least 2 colors.
repeating-linear-gradient(): Repeats a linear gradient
repeating-radial-gradient(): Repeats a radial gradient
initial: Sets the property to its default value
inherit: Inherits this property from its parent element
Background Repeat:
Here I am trying to add a couple of background images where the first image will appear only one time and the second image will be repeated. We are using background-repeat to do so.
<style>
body {
background-image: url("bg2.jpg"), url("bg3.png");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
</style>
Using Class:
In this example, I am creating a bg-image with various background properties such as image, color, position & repeat. I am targeting the bg-image class to apply the background properties to the webpage.
<style>
.bg-image {
background-image: url("bg2.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
</style>
Linear-gradient:
Here I am creating a linear gradient using two colors(i.e. red & yellow) and setting it as the background image.
<style>
#gradient {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow);
}
</style>
3 Color Gradient:
Here I am creating a linear gradient using three colors(i.e. red, blue & green) and setting it as the background image.
<style>
#gradient1 {
height: 300px;
background-color: #cccccc;
background-image: linear-gradient(red, blue, green);
}
</style>
Repeating Linear Gradient:
In this example, I am repeating the linear gradient using repeating-linear-gradient() functions and set it as the background image.
<style>
#gradient {
height: 300px;
background-color: #cccccc;
background-image: repeating-linear-gradient(red, blue 20%, green 30%);
}
</style>
Radial Gradient:
Here I am creating a radial gradient using two colors(i.e. red & yellow) and setting it as the background image.
<style>
#gradient {
height: 300px;
background-color: #cccccc;
background-image: radial-gradient(green, red);
}
</style>
3 Color Radial Gradient:
Here I am creating a radial gradient using three colors(i.e. red, blue & green) and setting it as the background image.
<style>
#gradient {
height: 500px;
background-color: #cccccc;
background-image: radial-gradient(red, blue, green);
}
</style>
Repeating Radial Gradient:
In this example, I am repeating the radial gradient using repeating-radial-gradient() functions and set it as the background image.
<style>
#gradient {
height: 200px;
background-color: #cccccc;
background-image: repeating-radial-gradient(red, blue 10%, green 20%);
}
</style>
Creating "Hero" image with CSS:
Creating "Hero" image with CSS
.hero-image {
background-image: URL("binatenoor.jpg");
background-color: #def345;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Now after executing the above snippets you would have understood how to insert a background image in a webpage using HTML & CSS. I hope this blog is informative and added value to you.
This content originally appeared on DEV Community and was authored by Binate Noor
Binate Noor | Sciencx (2021-10-12T07:25:03+00:00) Use Images as Backgrounds with HTML & CSS. Retrieved from https://www.scien.cx/2021/10/12/use-images-as-backgrounds-with-html-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.