chevron_left
358 points
19 13 11

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:

<!DOCTYPE HTML>
<html>

<head>

</head>

<body>
<img src="file:///C|/Users/raoha/Documents/test/pexels-frank-cone-2235130.jpg" width="100%" height="400%"/>

</body>
</html>

Output:

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. 

Background-image property:

The background-image property is used to set the background image of a webpage. The syntax for using this property is as follows:

background-image: url("location");

Background-size:

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

Background-repeat property:

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:

background-repeat: value;

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:

<!DOCTYPE HTML>
<html>

<head>

</head>

<body style="background-image:url(file:///C|/Users/raoha/Documents/test/pexels-frank-cone-2235130.jpg); background-size: cover; background-repeat: no-repeat;">

</body>
</html>

Output:

Now you can see that the image is filled on the entire body. 

More Posts

Center a background image in CSS sakshi - Aug 9
How to set background color in jquery ahsanhanif99 - Aug 15
How to set background image in java jframe using netbeans amna - Jul 11
Add a background Image in Bootstrap sakshi - Jul 1
How to change the background color in javascript Sanjana Sagar - May 22
How to resize an image in css amna - Jun 28
How to align text and image in same line in html ahsanhanif99 - Aug 18
How to add image in html from a folder Tushar Shuvro - May 19, 2020
Change background color of select option using CSS Hafsa_Rao - Jul 26
Change nav background color on scroll css kunal verma - Nov 4, 2020