How to Implement a Background Image in HTML
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 background image. In this blog we will understand how we can add background images in a webpage using HTML & CSS. The most common & simple way to add background image is using the background image attribute inside the <body> tag.
Example
1
2
3
4
5
6
7
| <!DOCTYPE html><html><body background="edureka.png"><h1>Welcome to Edureka</h1><p><a href="<a href="https://www.edureka.co">https://www.edureka.co</a>">Edureka.co</a></p></body></html> |
The background attribute which we specified in the <body> tag is not supported in HTML5. Using CSS properties, we can also add background image in a webpage.
Let us first understand how we can add background image in a webpage using CSS. Later moving ahead, we will look at different CSS properties using which we can change the look & feel of the webpage.
CSS background-image Property
In all the examples, we will be defining the CSS code inside the <style> tag. We will also look how to target div tag and class using CSS. In the below example, we are specifying the background-image & background-color CSS property which will set the background image & background property for the HTML body respectively.
Moving on with this article on Background Image In HTML
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html><html><head><style> body { background-image: url("bg1.jpg"); background-color: #cccccc;}</style></head><body> <p>Document Body</p></body></html> |
You can also go ahead and add two background images for the <body> element.
Example
1
2
3
4
| 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 we can use different CSS property values, let’s look at the list of CSS property values associated with the background image.
0 σχόλια :
Post a Comment