How to make the background image of the blog fill the entire screen

A recurring issue is that the background image of the blog should always take up the entire screen regardless of the screen resolution. And when we include a background image proportional to our screen, we forget that there are screens of all resolutions, very small and very large. So if we adjust the image to our screen, then a person with a large screen may not see the entire image or it will be distorted, if this happens when using a very small screen, then the image will be incomplete.

Here I will talk about two solutions, one using CSS3 and the other with jQuery . With one of these two options, regardless of the quality of the background image of the page, we will fill the entire screen.

CSS3

The first option is to use CSS3, the advantage of this method is that we cannot overload the blog with scripts, we only use the background -size property, which is responsible for what we want.
The disadvantage is that this property is only supported by modern browsers, so in the case of Internet Explorer it will only be visible for version 9 and higher, in other browsers there will be no problems.
The method is very simple, go to the template - edit HTML , find the background in the body and replace it with the following :

background: url (image url) static without center repeat;
Back size: cover;

Note. To find the body text tag { , click anywhere in the code area, then press CTRL+F and paste it into the search field. If you can't find it, remove the space between "body" and "{" and search again.

It looks like this.

body {
background: url ( image url ) without fixed recursion center;
Back size: cover;
Domain: 0;
}

Just enter the URL of the image and that's it.

Message

In this method, we are using jQuery with the BackStretch plugin, and its advantage is that it works in all browsers, including IE7 and above. And if you're already using jQuery, you don't have to worry about your blog's load time because the plugin is so small.

To use this method on your blog, go to Templates - HTML and edit previous versions. Paste this script:

Paste the image URL in the space provided and you're done.

As you can see, both options are easy to use, each has its own advantages and disadvantages, but the result is the same: the background image stretches to fit any monitor screen, regardless of resolution.

Remember, with the jQuery method, you need to make sure you're not using Mootools or Scriptaculous, and if you already have them, you'll need to make some changes to the script to make them compatible. And if you're already using jQuery, remember that you only have one version - the latest.