How to make the background image of the blog fill the entire screen
A constant question is how the background image of a blog always occupies the entire screen, regardless of the screen resolution. Then we put in the background image that measures our screen, forgetting that there are already very small and very large screens of all resolutions. So when we put an image on our screen, someone will have a bigger screen and they definitely won't see the full image or repeat, in which case the image won't be fully visible on very small screens.
Here I will talk about two solutions, one that uses CSS3 and one that uses jQuery . With both elements, we will fill the background image of the page on the entire screen, regardless of the resolution.
The first option is to use CSS3. The advantage of this method is that we do not confuse the blog with the texts, we use the background size function, which is focused on doing what we want.
The downside is that this feature is only supported by modern browsers, so in the case of Internet Explorer, it's only visible for versions 9 and later, other browsers shouldn't have a problem.
The method is very simple, just go to the form - Edit HTML section , find the background in the text { and replace it with:
It will look like this:
In this method, we use the jQuery BackStretch plugin, whose advantage is that it works in all browsers, including IE7 and later. If you are already using jQuery, you don't have to worry about your blog loading time because the plugin is really small.
To use this method on your blog, edit the form - HTML and go to the previous section Paste this script:
Put the url of the image in the space provided and you're done.
As you can see, both options are easy to use, they have their advantages and disadvantages, but the result is the same: the wallpaper is stretched to fit any screen, regardless of resolution.
Remember that in the case of the jQuery method, you have to make sure you're not using Mootools or Scriptaculous, and if you already have one, you have to make some changes to the script to accommodate it. If you're already using jQuery, remember to only have one version : the latest.
Here I will talk about two solutions, one that uses CSS3 and one that uses jQuery . With both elements, we will fill the background image of the page on the entire screen, regardless of the resolution.
CSS3
The first option is to use CSS3. The advantage of this method is that we do not confuse the blog with the texts, we use the background size function, which is focused on doing what we want.
The downside is that this feature is only supported by modern browsers, so in the case of Internet Explorer, it's only visible for versions 9 and later, other browsers shouldn't have a problem.
The method is very simple, just go to the form - Edit HTML section , find the background in the text { and replace it with:
Background: URL (Image URL) unique medium; fixed centerNote: To find the tag body text, click anywhere in the code box, then press CTRL + F and paste it into the search box. If you can't find it, remove the space between "body" and "{" and search again.
floor size: ceiling;
It will look like this:
Body {Just enter the url of the image and you're done.
background: url ( image url) without central repetition;
floor size: ceiling;
limit: 0;
}}
message
In this method, we use the jQuery BackStretch plugin, whose advantage is that it works in all browsers, including IE7 and later. If you are already using jQuery, you don't have to worry about your blog loading time because the plugin is really small.
To use this method on your blog, edit the form - HTML and go to the previous section Paste this script:
Put the url of the image in the space provided and you're done.
As you can see, both options are easy to use, they have their advantages and disadvantages, but the result is the same: the wallpaper is stretched to fit any screen, regardless of resolution.
Remember that in the case of the jQuery method, you have to make sure you're not using Mootools or Scriptaculous, and if you already have one, you have to make some changes to the script to accommodate it. If you're already using jQuery, remember to only have one version : the latest.
