Big Background Images In Web Design
In this article, I want to gather some solid techniques for creating large oversized wallpapers. This can be achieved using basic CSS3/CSS2 techniques or using open source third-party jQuery Plugins. There are no right or wrong answers, just different levels of support in older older browsers. Browse through this collection of rivet development techniques and see what you can put together.
CSS tricks of the trade
To help us get started, I would like to present a very useful article on CSS tricks that describes many of these ideas. The simplest solution with the greatest support is CSS techniques. I have found that the CSS3 method works correctly in most popular browsers, and there are even Hacks to manage older versions of Internet Explorer.
Let’s take a look at the CSS3 Code to place these wallpapers in full width 100% responsive. I’m going to use the Codes from Chris Coyeir’s article to explain how easily this can be implemented.
The HTML element is a much simpler target than the body, because we know that everything is enclosed in it. Then we apply the background image with a full central position, without repetition and fixed when scrolling. The new CSS3 background size property applies all the positioning magic. The use of the many prefixes of the manufacturer will also provide us with a wider range of support.
It should be noted that the filter properties in IE have not always played well. Some users report problems with scrollbars or text selection on the page. To work around this error, you can try applying the background image codes to an internal Div in the body that is set to a total width/height of 100%.
CSS2 Fallback
Surprisingly, I found that more browsers support the CSS3 method than all other styles. However, I will continue to offer this secondary method with regular CSS properties for an img element.
I think the biggest nuance with this method is that when you right-click on The background, the context menu opens as if you were clicking on an image, not on a web page. It can get annoying for visitors who can’t figure out why the menu is different. However, if you are struggling with the CSS3 method and still want to avoid JavaScript, this may be your only Option.
The image tag must be located directly in your body before opening other Divs. The image will go to the background and all the rest of the content should surround itself. This is known to work in all major browsers (Safari/Firefox/Chrome/Opera), but is not as well supported in IE6-7.
JavaScript Solutions
Let’s move on to more dynamic codes using jQuery Plugins instead of typical CSS. These are often written in terms of flexibility, so mobile smartphones and responsive layouts should be a #1 priority. jQuery is also a fairly common language that most web developers are somewhat familiar with.
There may be dozens of jQuery Plugins to choose from, but I’m going to introduce you to three of my favorites. Most of these code libraries are very easy to implement and configure in a new website. They are all hosted on Github, which makes them an excellent open source solution. This means that you can expect fewer errors and more support, as more developers bring their knowledge to the codebase of each plugin.
Extension of the back
Some developers have seen the Backstretch name on other websites and blog posts. It is a very popular plugin and has been around for almost 3 years, since December 2009. the developers have eagerly updated this Plugin and even support image slideshows with static wallpapers.
To implement the Code itself, it is enough to download a copy of the script and attach it to your web page with a script tag. If you want to use CDN Cloud hosting, try this cdnjs link instead. Then all we have to do is open another script tag and enter a single line of jQuery code. The code library was written in a single line. This makes Backstretch very easy for non-technical web developers to start working. You do not need to apply additional HTML markup or other CSS properties. And the images respond 100% to the browser window
The above code has been slightly modified to support a slideshow in the background. You have the option to list as many image positions as you want to display in the slideshow, followed by two bits of metadata. The duration value is the duration between slides, encoded in milliseconds. The second fade value determines the number of milliseconds needed to go from one image to another.
Vegas
The Vegas Background jQuery plugin is another great choice for web developers looking for a quick implementation. What sets Vegas apart in itself is that they have more options for background customization. It is actually possible to configure an overlay effect with stripes or dots on top of your photo. A demo can be seen on the Vegas documentation configuration page, which uses a spotted overlay effect.
You will need to attach a copy of the Vegas JS and CSS files that you will find on the Github page. This plugin can work with a single line of code, but there are so many possible customizations compared to Backstretch. Believe it or not, we can also use a single line or a block of code to achieve the same effect as before. Vegas allows other customizations if you want to create a slideshow of images or add an overlay texture. On the Overlay Documents page, you will see a number of sample templates that you can show directly there. This is a great example of the advantages of image overlays with Vegas over other jQuery Plugins.
Anystretch
My recent jQuery solution is a Plugin called Anystretch, which is actually a branch of the Backstretch plugin. There are minor differences that can help developers update the background image or apply BGs to different elements of the page.
This script works in the same way as before, where you need a copy of jQuery and a copy of the Anystretch files. Then, simply configure the syntax as described below and place it in another set of <script></script> tags. Note The speed parameter determines the speed at which the image is displayed after loading, measured in milliseconds.