Stretching the background of an image while maintaining the proportions of a specific object. How to stretch the background, image to the full width of the block, screen Stretch an html image

Hello. Today we’ll look at how you can stretch the background using CSS tools (without the intervention of other tools, such as javascript and others like them).

Stretch CSS background means became possible with the advent of CSS3, specifically with the help of the background-size property. I must say that this property works much better than similar solutions in Javascript (which were used before the appearance of background-size), since it responds faster and more adequately to changes in browser size, smoothes out a stretched image faster, and, as they liked to say in the early 2000s, x, - “Will work even with Javascript disabled.”

Solution: How to stretch the background using CSS tools

The background-size property can have multiple values.
1) this can be one of the directives: cover or contain.

Background-size: contain; /* Scales the image while maintaining proportions so that the entire image fits inside the block. */ background-size: cover; /* Scales the image while maintaining aspect ratio so that its width or height is equal to the width or height of the block. */

2) it can be a percentage (100% or 94% of the container width). In this case, you can use either 1 percentage value or 2. If there are 2 values, then both the height and width of the image will be scaled at the same time, and each value is adjusted in proportion to the percentages specified in the parameters).

Background-size: 100%; /*Equivalent to the cover directive*/ background-size: 100% 50%; /*The width will be 100% of the width of the block, but the height will be only 50%, the image will most likely be deformed*/

3) directly numerical value (in piskels, centimeters, em, etc.). There can also be 2 (or 1) parameters, as in the previous case.
4) value auto. Indicates that the image will not be stretched, but the original size will be used. In this case, there can also be 2 or 1 parameters. That is, you can specify the following:

Background-size: 60% auto; /*the width of the image will be 60%, and the height will be proportional to the size of the original image*/

Where would the CSS background stretch solution work?

Judging by the Can I Use website, it will work in all modern browsers, including IE versions no lower than 9. So, in principle, there is no reason to worry. See compatibility table:

Greetings. In this article, I want to share three ways to place an image as the background of an entire page using just HTML + CSS (no JS).

So, the requirements for background image we have the following:

Covers 100% of page width and height
The background is scaled if necessary (the background is stretched or compressed depending on the screen size)
The aspect ratio of the picture is preserved
The image is centered on the page
The background does not cause scrolling
The solution is as cross-browser compatible as possible
No other technologies other than CSS are used

Method 1

In my opinion this is best way, because it is the simplest, most concise and modern. It uses the CSS3 background-size property, which we apply to html tag. It is html, not body, because its height is greater than or equal to the height of the browser window.

Set the background to be fixed and centered, then adjust its size using background-size: cover .

Html ( background-image: url(images/background.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background- size: cover; -o-background-size: cover; background-size: cover)

This method works in

Chrome (any version) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

To ensure images load quickly, host your sites only with trusted hosting providers, such as Users and search engines love fast sites. Method 2 This method involves using an img element, the size of which will change depending on the size of the browser window. To stretch an image to fill the entire screen, it needs to set its min-height and width to 100%. And so that the image is not compressed to a size smaller than the original, set the min-width with a value equal to the width of the image.

If the window width is smaller than the image width, a media query will be used to center the background.

img.background ( min-height: 100%; min-width: 640px; width: 100%; height: auto; position: fixed; top: 0; left: 0; /* Depends on image size */ @media screen and (max-width: 640px)( img.bg ( left: 50%; margin-left: -320px; ) ) )

This method works in:

Any version of good browsers (Chrome, Opera, Firefox, Safari)
IE 9+

Method 3

Another way is as follows: fix the image to the upper left corner of the page and stretch it using the min-width and min-height properties of 100%, while maintaining the aspect ratio.

True, with this approach the image is not centered. But this problem is solved by wrapping the picture in , which we make 2 times the size of the window. And we stretch the image itself and place it in the center.

div.background ( position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; ) img ( position: absolute; top: 0; left: 0; right: 0; bottom : 0; margin: auto; min-width: 50%;

This method works in good browsers and IE 8+.

I hope this information will be useful to you. Personally, I often use these methods, especially the first one. There are probably other ways to place an image in the background when CSS help. If you know about them, please share them in the comments.

I remember rummaging through a lot of information and trying quite a few methods until I found the exact solution that was needed at that moment.

Below I will show 3 methods that stretch the background to the full width of the screen.

Method No. 1

The first method uses pure CSS3. Everything works thanks to the background-size property. In my case, I will stretch the image to the entire width of the screen, that is, I will assign properties to the body tag. You can apply it to a block as needed, for example.

We will stretch this picture with a cute girl to fill the entire screen :)

In general, we define a block to which we assign styles and add the following code to the style file for this block:

Body( background: url(images/bg.jpg) no-repeat center top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover)

As you can see, in the background parameter we add the path to the image and set the position of the image relative to the screen. In our cases these are center and top. This means that the picture will be in the center of the screen, and its top will be pressed against the top of the screen. This is so that the girl’s face is always visible. If, for example, you have an abstract background or nature, where you can see the sky, field, horizon, then you can set the values center and center. In general, if you are familiar with CSS, then I think you will understand. It is also set to fixed , which freezes the image.

The method is very simple, I always use it and it suits me 100%. There is only one thing. Old browsers are not familiar with CSS3, so those using ancient versions will not see the desired result.

Method No. 2

This method uses regular CSS. In essence it is also simple. We display an image in the body of the site by assigning id - bg :

And we write the styles:

#bg ( position:fixed; z-index: -1; top:0; left:0; min-width:100%; min-height:100%; )

The positioning is fixed and stretches across the entire screen. It’s as simple as that :).

Method No. 3

jQuery is used here. Therefore, you first need to connect the library if it is not connected previously.

After the library, we connect the script, which will scale our background

$(window).load(function() ( var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( if ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

And at the end we add styles to make everything work. Open the style file and add the following code to it:

#bg ( position: fixed; top: 0; left: 0; z-index: -1; ) .bgwidth ( width: 100%; ) .bgheight ( height: 100%; )

You can see from the styles that we have added positioning. In this case it is fixed . The image will remain a fixed background when scrolling, but if you change the positioning to absolute , the background can be scrolled. By the way, the same can be done with the first two methods.

The parameter is also specified - z-index: -1, so that the image is behind the text. If you don't have text that should be in front, you can remove this option.

Which method to use is up to you. As I wrote above, the first method is closer to me. It is the simplest and no worse than others.

That's all, thanks for your attention. 🙂

Task

Stretch background picture full width of the browser window using CSS3.

Solution

To scale the background, use the background-size property; set its value to 100%, then the background will occupy the entire width of the browser window. For older versions of browsers, you should use specific properties with prefixes, as shown in example 1.

Example 1: Stretchable background

HTML5 CSS 2.1 IE Cr Op Sa Fx

Stretchable background body ( background: url(images/sun2.png) no-repeat; -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ and Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Modern browsers */ )

The result of this example is shown in Fig. 1.

Rice. 1. View of the background with a reduced window size

As the size of the browser window increases, the background will also begin to expand, which will lead to a deterioration in the appearance of the picture (Fig. 2).

Rice. 2. View of the background with an enlarged window size

Here we will analyze it in as much detail as possible. How can you implement a background for an Internet resource that should cover the entire workspace? Basically everything is done in CSS3, you can also connect jQuery and even PHP, but let’s look at one option that uses pure CSS. First you need to understand or determine what should happen. This is, of course, a full fill of the window with a background or image, so that there are no gaps.

Where will we stretch the picture so that it looks correct, since if the background is under one shade of color, it is easier to work with it. Don't forget about matching the picture to its proportions. And it should definitely turn out that the image is centered. The main thing is that everything should be as cross-browser compatible as possible and understandable, without various shenanigans with flash.

CSS3 background method This is the most common method that can stretch the background on pure CSS, and all thanks to one property called background-size, which will only be present in CSS3.

Here we will initially create a fixed background and set it in the center, so that all that remains is to stretch it, where we connect the background-size properties, this all goes under the background reference.

In general, we focus on the block to which we assign styles and add the following code to the style file for this block:

body(
background: url(http://site/Aben/ABGDA/artunsa.png) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

As you can see, the background parameter, where we initially add the path to the picture, where the position of the image is set to match the screen window. If you look at it, the values of center and top are responsible for the center and pressing on all sides so that there are no spaces. To make it clear, the value fixed is responsible for the fixation function.

The method is quite ordinary, which I use all the time and it suits me 100% percent.

Another way:

Another common method is to insert a picture onto the page. It will have a fixed position and will be placed in the upper left corner. We'll give it a min-width and min-height of 100%. It is also necessary to prepare the picture in advance, in order to ensure the proportionality of the sides.

#website (
position:fixed;
top:0;
left:0;
min-width:100%;
min-height:100%;
}

Here you can see that this code does not center the background image, that you can quickly do everything as needed, or rather, fix the image by taking it into a div.

.jpg" alt="">

CSS

#website (
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#site img (
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}