Have you ever tried setting the background image on an entire page in HTML using the height and width property? If yes, you must have got a blurred image i.e. the image whose pixels have been burst. In this article, we are going to see an alternative way to set the background image without resizing or changing the width or height of the image. But, before moving to the solution, let’s see how the background image looks like when we set it using the width and height attributes:
<img src="file:///C|/Users/raoha/Documents/test/pexels-frank-cone-2235130.jpg" width="100%" height="400%"/>
In the above image, you can clearly see that the image has got blurred when we set it using the width and height properties. Furthermore, the image does not fit in the browser window. There is some space on the left and right sides and you need to scroll down to see the entire image. Now, let’s see the solution to this problem.
If you want to set an HD image as the background of your webpage, you better use CSS instead of directly embedding it inside the body. In CSS, you can use background-image, background-size, and background-repeat property to achieve that.
The background-image property is used to set the background image of a webpage. The syntax for using this property is as follows:
The background-size property is used to set the width and height of the background image. You can set whether to display the image on the entire page or just some part of the page. The syntax for using this property is as follows:
background-size: width height;
The width and height of the background image can be given in centimeters, millimeters, inches, points, pixels, percentages or picas. For example:
background-size: 100% 100%;
background-size: 100px 200px;
You can also assign any of the following values to background-size property:
auto: browser set the image size automatically
cover: covers the entire area
contain: covers the box or the container
initial: Sets the default value
inherit: inherits the value from its parent element
This property is used to specify whether the background image should display multiple times or a single time and in which direction. The syntax for using this property is as follows:
The following values can be assigned to this property:
- repeat: the background image repeats vertically and horizontally
- repeat-x: the background image repeats horizontally only
- repeat-y: the background image repeats vertically only
- no-repeat: the background image does not repeat in any direction
- space: background image is repeated but the whitespace is distributed between the images.
- round: no whitespace
- initial: Sets the default value
- inherit: inherits the value from its parent element.
Now that we know the properties that we can use to set the background image in our webpage, let’s apply the properties and see how we can set the image without changing its parameters:
<body style="background-image:url(file:///C|/Users/raoha/Documents/test/pexels-frank-cone-2235130.jpg); background-size: cover; background-repeat: no-repeat;">
Now you can see that the image is filled on the entire body.