Css stretch image to full width. How to stretch a picture to full screen using css and other proven methods. Where will the solution to stretch CSS background work

A task

Stretch the background image to the full width of the browser window with using CSS3.

Decision

The background-size property is intended for scaling the background, 100% is specified as its value, then the background will occupy the entire width of the browser window. For older versions of browsers, specific properties with prefixes should be used, as shown in Example 1.

Example 1. Stretchable background

HTML5 CSS 2.1 IE Cr Op Sa Fx

Result this example shown in fig. 1.

Figure: 1. View of the background at a reduced window size

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

Figure: 2. Background view at increased window size

Welcome to my blog. Continuing to grasp the basics of html. This tutorial will be so simple and interesting that I hope you will want to learn more about programming languages. In just a couple of minutes you will learn how to make a background image in html and achieve an excellent result.

I will also tell you about some of the nuances that will make the background more even and beautiful. Well, shall we begin?

Picture selection

I would like to start by choosing an image. To make your page look smoother and more beautiful, and you don't have to bother with size and alignment. I suggest immediately looking for seamless textures. What it is?

Unfortunately, it is not possible to stretch an image in html to full screen. The photo is used in full size. If the picture is small, then it will pave the entire area, as in the screenshot below. To stretch the image, you will have to create an additional css document, without this it will not work.

Although, you have the option to bypass the system. To do this, use photoshop and pictures up to the width of the screen (1280x720). Although in this case, when scrolling down, it will change the picture to another.

A much better option if you don't want to use css would be to use seamless texture... They have no joints visible. They are like wallpaper or modern tiles in design. One replaces the other and no joints are visible.

If you are also interested in the lack of legal consequences for their use, then I recommend searching on the site Pixabay.com .

Html

Now let's work with the code. I must note right away that now we are working with html, that is, we are changing the image not for the entire site, but only for one specific page for which the code is being written. If you are interested in changing the entire resource, then you need to generate code with css, But more on that later.

So you can work in Notepad, I prefer NotePad ++. It is much more convenient to work in it: the code is added for you, the tags are highlighted. The program is free and weighs about 3 MB. Highly recommend, especially if you are a beginner.

So in the tag body you need to add an attribute background and provide a link to the image where the picture will be taken from. This is how it looks in the program.

You can just open notepad and copy this code here. In quotes, link to the picture you like.

I would like to note for beginners, this is the point. If you take an image from pixabay, then you need to insert the link not on the page with the picture, but open the picture in the next tab.

Copy this particular URL.

Save your document. Do not forget that if you are using notepad, then you need to use the extension .html ... Just name the document, for example, back.html ... Otherwise, it will be saved as text Document and the browser just won't know what it needs to do.

Done, the page is filled with a different color.

If you want to know more about html, I advise you to download free course by Evgeny Popov ... From it you will learn more tags, language features, try some new tricks and know more.

I will not say that Evgeny Popov's courses are wildly popular. Many experts scold him and if you come across such statements, then here's my opinion. These lessons are provided free of charge, and despite this, they perfectly cope with their main task - to show the beginner the basics, to bring him up to date.

Just as every writer has his own view of how to write, so programmers have their own handwriting. You can learn to create sites all your life, but you need to start somewhere. From books? Not that. Yes, they contain more reliable information, relevant information, but they are so difficult to master.

Don't agree with me? I can suggest an alternative. Book by Elizabeth and Eric Freeman " Learning HTML, XHTML and CSS ". Not a very boring bestseller and was released not so long ago, in 2016. The information has not yet become outdated.

CSS

If you need the background to repeat on all pages of your site, then you can't do without CSS. Of course, you can write the path every time, as in the previous chapter. But imagine if over time you need to replace it: the link will become outdated or you just want to change the design. Go to each page and change the code? This will not work.

CSS helps solve this problem. You need to create a file with css extension and enter the following code:

Let's talk a little about the code itself. In brackets, after url you can enter a link to a picture from a third-party source, or just the name of the document, if the picture is in the same folder with this file.

For those who want to know better

With css you can stretch background image, make it so that it does not repeat, add gif-animation and much more.

One article can't do everything. And I did not set such a task for myself. There are many subtleties and if you are promised to be told about everything in one article, then this is nothing more than a deception.

Do you want to learn how to write websites correctly? I recommend that you learn programming languages. I can recommend the course of Andrey Bernatsky " HTML5 and CSS3 from Zero to Pro ". I really like this author. I did not take this particular course, a few years ago there was already something similar, but less modern.

The author tells very pleasantly, everything is easy and understandable. The highlight of this course is that you are not just learning, you are creating a specific site together with the teacher. As a result, you will get a business card, blog and even an online store. Very cool. You can watch the first three theoretical HTML5 lessons from this course right here and now.

By the way, along with this course you get 7 bonuses: the basics of html and css by Andrey Bernatsky, layout for beginners, creating a landing page for the evening, and much more. Before doing any serious training, try the free course “ Practice HTML5 and CSS3 ».

Well, that's basically all. Subscribe to our newsletter to learn more. Very soon I will tell you a little more about responsive layout, increasing earnings from any blog and give a lot useful tips to simplify work. Until next time and good luck in your endeavors.

Web technologies, like various trends in design, do not stand still, so every time there are some original chips and nuances for sites. One of these "directions" is the use of a background (backgorund), which stretches to the entire screen in width and height. Something like I told about a year ago or more - the image was placed in the blog header and smoothly "transitioned" to the main background color of the web page. You can even add it if you want.

Placing a large, scalable image as a background is something new and more difficult, and I found a solution in this article.

The purpose of this lesson is to place a background image on the site that would permanently cover the entire background of the browser window. What exactly needs to be done:

• fill the entire page with one image without spaces;
• resizing the picture if necessary (reducing the browser window);
• maintaining the aspect ratio of the image;
• positioning the image in the center of the page;
• lack of scroll bars on the page;
• cross-browser solution suitable for different browsers;
• implementation without any third-party flash technologies.

So, there are several suitable solutions for a website background in full screen at once.

A wonderful, simple and progressive solution with CSS3

To accomplish this task, we can use the background-size property in CSS3. We'll use a better html element than body. Let's set a fixed and centered background, and then use the cover value in the background-size.

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

The solution is supported by almost all popular on the network:

• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
• Opera 10+ (Opera 9.5 supports background-size but no cover value)
• Chrome Whatever +
• IE 9+
• Safari 3+

A certain Goltzman found a solution that allows the hack to work in IE

filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src \u003d ". myBackground.jpg", sizingMethod \u003d "scale"); -ms-filter: "progid: DXImageTransform.Microsoft.AlphaImageLoader (src \u003d" myBackground.jpg ", sizingMethod \u003d" scale ")";

But attention !!! in this case, there may be some problems with the work of links on the page. By the way, a little later Matt Litherland added that the code, in principle, can be used, but for this it cannot be used html elements or body and you need to implement everything through a div with 100% height and width.

CSS-hack number 1

An alternative version is presented by Doug Neiner. In this case, an inline element is used which can be resized in any browser. We set the min-height to fill the browser window vertically and set the width to 100%, which fills the page horizontally. We also set min-width so that the image is never smaller than it actually is.

img.bg (/ * Set rules to fill background * / min-height: 100%; min-width: 1024px; / * Set up proportionate scaling * / width: 100%; height: auto; / * Set up positioning * / position: fixed; top: 0; left: 0;) @media screen and (max-width: 1024px) (/ * Specific to this particular image * / img.bg (left: 50%; margin-left: -512px; /* 50% */ ) )

Works in any version of quality browsers - Safari / Opera / Firefox and Chrome. As always, IE has its own nuances:

• IE 9 - works;
• IE 7/8 - Most often functions correctly, but does not center images less than the browser window;
• IE 6 is customizable, but who even needs this browser.

CSS-hack option 2

Another option for solving the problem using CSS styles this is to place the inline image on the page with a fixed position to the left upper cornerand then set the min-width and min-height to 100% keeping the aspect ratio.

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

The hack works in:

• Safari / Chrome / Firefox (too early versions not tested, but works well in the latter)
• IE 8+
• Opera (any version) and together with IE both both buggy the same with a positioning error.

JQuery Method

This option is much easier (in terms of CSS) if we know that the aspect ratio of the image (img is used as the background) is greater or less than the current aspect ratio of the browser window. If less, then we can use only width \u003d 100% and at the same time the width and height of the window will be equally filled. If more - you can only specify height \u003d 100% to fill the entire window.

All data is accessed through JavaScript, the codes are used as follows:

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

$ (window) .load (function () (var theWindow \u003d $ (window), $ bg \u003d $ ("# bg"), aspectRatio \u003d $ 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"); });

In my opinion, centering is not done in this case (as far as I understand), but it can be done. Most desktop browsers are supported, including IE7 +. Finally, the author of the article about hacks prepared a set of example files in which all this is implemented - you can download it. The comments to the original article also contain some information and discussion, although the author added most of the important details in the form of upgrades to the post, and I also have it translated and indicated. Of course, examples will help to understand all this. In general, if not for the constant "jokes" from IE7, all the hacks mentioned would be perfect.

P.S. Want to buy a book? - it is not necessary to go to the store, because now the online bookstore allows you to do everything through the network - choose, pay and arrange home delivery.

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

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

Method number 1

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

We will stretch this picture with a cute girl to full screen 🙂

In general, we define the block to which we assign styles and add the following code in the styles file to 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 parameter background add a path to the image and set the position of the image relative to the screen. In our case, these are center and top. This means that the picture will be in the center of the screen, and pressed with its top to the top of the screen. This is so that the girl's face is always visible. If you have, for example, an abstract background or nature, where you can see the sky, field, horizon, then you can set the values \u200b\u200bcenter and center. In general, if you are familiar with CSS, then I think you can figure it out. Also set to fixedthat captures the image.

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

Method number 2

This method uses regular CSS. In fact, it's also simple. We display the image in the body of the site by assigning id - bg:

And we prescribe the styles:

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

The positioning is fixed and stretches to full screen. It's that simple :).

Method number 3

It applies here jQuery... Therefore, you first need to connect the library if it was not connected earlier.

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

Finally, add some styles to make it work. Open the stylesheet 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 the fixed background when scrolling, but if you change the positioning to absolute, then the background can be scrolled. By the way, you can do the same with the first two methods.

Also specified parameter - z-index: -1, so that the picture is behind the text. If you do not have text that should be in front, you can remove this parameter.

Which way 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. 🙂

Hey. Today we will consider how you can stretch the background with css tools (without the intervention of other tools, such as javascript and others like them).

Stretch cSS background tools became possible with the advent of CSS3, specifically with 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 browser resizing, smoothes a stretched picture faster, and, as they liked to say in the early 2000s, x, - "Will work even with Javascript disabled."

Solution: How to Stretch CSS Background Using Tools

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

Background-size: contain; / * Scales the image proportionally so that the whole image fits inside the block. * / background-size: cover; / * Scales the image proportionally so that its width or height is equal to the width or height of the box. * /

2) it can be percent (100% or 94% of the container width). In this case, you can use both 1 value in percentage and 2. If there are 2 values, then the height and width of the picture will be scaled simultaneously, while each of the values \u200b\u200bis adjusted proportionally to the percentage specified in the parameters).

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

3) directly numerical value (in pixels, centimeters, em, etc.). There can also be 2 (or 1) parameters, as in the previous case.
4) auto value. Indicates that the picture will not be stretched, but the original size will be used. In this case, the parameters can also be 2 or 1. 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 dimensions of the original image * /

Where would the CSS background stretch solution work?

Judging by the data from the Can I Use site, it will work in all modern browsers, including IE versions of at least 9. So, in principle, there is no reason to worry. See compatibility table: