How to Resize Background Image with HTML Stretch and CSS

Last update: 04/10/2024
How to Resize Background Image with HTML Stretch and CSS

Do you want to know how to change the background image size with HTML stretch and css? This article provides HTML codes to allow you to stretch a background image.

CSS3 introduced a new property, background-size which allows you to resize background images. That means you can stretch your image horizontally, vertically, or both. You can resize it the way you want.

  • E.g., you can make the background image stretch (and shrink) to the size of the element it is applied to.

In the following example, we use provide background-size with a value of 100% 100%, meaning it is the same size as the element, regardless of the actual image size.

You may also be interested in reading about: How to Edit HTML on Tumblr. 4 Ways to Do It

Stack Editor Unstacking Editor

< html >

< head >

< title > Example

<style type="text/css">

.background {

box-sizing : border-box ;

width : 100% ;

height : 150px ;

padding : 3px ;

background image : url ( /pix/samples/bg1.gif );

border : 1px solid black ;

background-size : 100% 100% ;

}

< body >

<div class = «background» >

Stretched background…

< p > And here is the image in its original size:

< img src = "/pix/samples/bg1.gif" style = "border: 1px solid black;" >

Stretch background image size with HTML for the entire page

The above example uses a background image applied against a  element. You can also apply it against the  element, resulting in the image stretching to fill the entire page.

Stack Editor Unstacking Editor

< html >

< head >

< title > Example

<style type="text/css">

html ,

body {

height : 100% ;

}

body {

background image : url ( /pix/samples/bg1.gif );

background repeat : no repeat ;

background-size : 100% 100% ;

}

< body >

< p > This page has a stretched background image…

< p > And here is the image in its original size:

< img src = "/pix/samples/bg1.gif" style = "border: 1px solid black;" >

You may need to set the property of the elements and in. height100%

Increase background image size with HTML, without “stretching” the image out of proportion

The background-size property also accepts values ​​that prevent the image from stretching out of proportion.

Increase background image size with HTML using background-size: cover

You can use background-size: cover to scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size so that both its width and height can completely cover the background positioning area.

Using this option will ensure that the image is not stretched out of proportion. Keep in mind that some parts of the image may be hidden if the element has different proportions than your background image.

  The 7 Best Programs for Programming in Java
Stack Editor Unstacking Editor

< html >

< head >

< title > Example

<style type="text/css">

html ,

body {

height : 100% ;

}

body {

background image : url ( /pix/samples/bg1.gif );

background repeat : no repeat ;

background-size: cover;

}

< body >

< p > This page has a stretched background image…

< p > And here is the image in its original size:

< img src = "/pix/samples/bg1.gif" style = "border: 1px solid black;" >

Increase background image size with HTML using background-size: contain

You can use background-size: contain to scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size so that both its width and height can fit within the background positioning area.

Using this option will ensure that no part of the image is hidden as it is scaled up or down.

Stack Editor Unstacking Editor

< html >

< head >

< title > Example

<style type="text/css">

html ,

body {

height : 100% ;

}

body {

background image : url ( /pix/samples/bg1.gif );

background repeat : no repeat ;

background-size : contain ;

}

< body >

< p > This page has a stretched background image…

< p > And here is the image in its original size:

< img src = "/pix/samples/bg1.gif" style = "border: 1px solid black;" >

Using CSS Layers to Resize Background Image with HTML

Although the background-size property is the recommended way to stretch background images, this property has not always existed.

Before this property was invented, it was necessary to use a bit of trickery to achieve the effect of "stretched background image«.

One method was to use a  normal element and then layer it to make it look like a background image.

Background Image Resizing Properties with HTML and CSS

Now, let's look at some examples of background image resizing properties using HTML and CSS:

Example

Here you specify the size of a background image with «auto» and in pixels:

#example 1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}

#example 2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}

Now, let's look at some more Test examples for you to try yourself below.

Defining and Using Background Image Resizing with HTML

The background-size property specifies the size of background images.

There are four different syntaxes you can use with this property: the keyword syntax («car», «cover» y "contain"), the syntax for a value (sets the width of the image (height becomes "auto«), the two-value syntax (first value: image width, second value: height), and the multiple-background syntax (comma-separated).

Default value: auto
Inherited: No.
Animatable: Yes.
Version: CSS3
JavaScript Syntax: object .style.backgroundSize = “60px 120px”
  How to prevent web browsers from remembering your passwords

Browser support

The numbers in the table specify the earliest browser version that fully supports the property.

Numbers followed by -webkit-, -moz- or -o– specify the first version that worked with a prefix.

Property
background-size 4.0
1.0 -webkit-
9.0 4.0
3.6 -moz-
4.1
3.0 -webkit-
10.5
10.0 -o-

CSS syntax for resizing background image with HTML

background-size: auto | length | covers | contain | initial|inherit;

Property values
Value Description
auto Default value. The background image is displayed in its original size.
length Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is provided, the second is set to "auto". Read about length units
percentage Sets the width and height of the background image in percentage of the parent element. The first value sets the width, the second value sets the height. If only one value is provided, the second is set to "auto"
cover Resize the background image to cover the entire container, even if you have to stretch the image or crop one of the edges slightly.
Contain Resize the background image to ensure the image is fully visible
initial Sets this property to its default value. Read about initial
Inherit Inherits this property from its parent element. Read about inheriting

More examples of resizing background images with HTML

Now, to make the parameters clearer, we leave you more examples to change the background image size with HTML:

Example 1

Specifies the size of a background image with percentage:

#example 1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}

#example 2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
}

Example 2

Specifies the size of a background image with "cover":

#example 1{
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}

Example 3

Specify the size of a background image with "contain":

#example 1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}

Example 4

Here we have two background images. We specify the size of the first background image with “contain” and the second background image with “cover”:

#example 1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}

Example 5

Use different background properties to create a “hero” image:

.hero-image {

 background-image: url(«photographer.jpg»); /* The image used */

 background-color: #cccccc; /* Use if the image is unavailable */

 height: 500px; /* You must set a specified height */

 background-position: center; /* Center the image */

 background-repeat: no-repeat; /* Do not repeat the image */

 background-size: cover; /* Resize the background image to cover the entire container */
}

How to Stretch Background Image Size with HTML to Fit a Web Page

This part of the article explains two ways to stretch a background image to fit a web page using CSS3.

  1. preferred method: use CSS3 property to background-size and set it to cover.
  2. Alternative method: Use CSS3 property to set the fund size en 100% y the position of the fund at the

Method 1: The modern way

Images are an important part of engaging website designs. They add visual interest to a page and help you achieve the design you're going for. When working with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes.

  Fix Error 0x80070005 On Windows 10

The best way to stretch an image to fit the background of an element is to use the CSS3 property, background-size, and set it equal to cover.

div {

background-image: url('background.jpg');

background-size: cover;

background repeat: no repeat;

}

Check out this example in action. Here is the HTML in the image below.

How to Resize Background Image with HTML Stretch and CSS

Now, look at the CSS. It's not much different than the code above. There are a few additions to make it clearer.

How to Resize Background Image with HTML Stretch and CSS

Now, this is the full screen result.

How to Resize Background Image with HTML Stretch and CSS

By setting the background-size to cover, you ensure that browsers will automatically scale the background image, no matter how large it is, to cover the entire area of ​​the HTML element it is being applied to. Let's look at a narrower window.

narrowest window
narrowest window

This method is supported by over 90 percent of browsers, making it an obvious choice in most situations. It does create some issues with Microsoft browsers, so a fallback might be necessary.

Method 2: The alternative path

Here is an example that uses a background image for the body of a page and sets the size 100% so that it always stretches to fit the screen. This method is not perfect and can cause some uncovered space, but by using the property background-position, should be able to eliminate the problem and still accommodate older browsers.

body {

background: url('bgimage.jpg');

background repeat: no repeat;

background-size: 100%;

background-position: center;

}

Using the example above with the background-size set to 100%, you can see that the CSS looks pretty much the same.

CSS
CSS

The result in a full-screen browser or one with dimensions similar to the image is almost identical. However, with a narrower screen, the flaws start to show.

narrowest window

Clearly, it's not ideal, but it will work as an alternative.

This property works in IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ and on all major mobile browsers. This covers it for all modern browsers available today, meaning you should use this property without fear of it not working on someone’s screen.

Here you can learn about: How to Open HTML Files in Google Chrome

Conclusion

Between these two methods, you should have no difficulty supporting almost all browsers. As background-size:cover gains even more acceptance among browsers, even this alternative will become unnecessary. Clearly, CSS3 and more responsive design practices have simplified and optimized the use of images as adaptive backgrounds within HTML elements. We hope we have helped you understand what are the features, usage, and function of background image resizing with HTML and CSS.

Leave a comment