
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.
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” |
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.
- preferred method: use CSS3 property to background-size and set it to cover.
- 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.
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.
Now, look at the CSS. It's not much different than the code above. There are a few additions to make it clearer.
Now, this is the full screen result.
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.
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.
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.
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.
My name is Javier Chirinos and I am passionate about technology. Ever since I can remember, I have been interested in computers and video games, and that passion has turned into a job.
I have been publishing about technology and gadgets on the Internet for over 15 years, especially in mundobytes.com
I am also an expert in online marketing and communication and have knowledge in WordPress development.