Web technologies, as well as various trends in design, do not stand still, so every time there's some new chips and nuances for the sites. One of these trends include the use of the background (backgorund), which is stretched to full screen width and height. Something like a year ago or more I'm told how to make a great backdrop for the site through CSS - Image placed in a hat blog and smoothly "passed" in the main background color of a web page.Placement on the background of a large scalable images - this is something new and more complex work, whose solution found in this article .
The purpose of this lesson, place the background image on the site, which would permanently shut the entire background of the browser window. What exactly needs to be done:
- fill the whole page with one image with no spaces;
- resize images as needed (reduced browser window)
- maintaining the image proportions;
- location of the image in the center of the page;
- no scroll bars on the page;
- cross-browser solution, suitable for different browsers;
- implementation without any third-party technologies such as flash.
Thus, there are several suitable solutions for the background site on the entire screen.
A wonderful, simple and innovative solution using CSS3
To realize the problem we can use the background-size property in CSS3. We use the html element that is a better body. Establish a fixed and centered background, after which we will use the background-size value of cover.
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 supports almost all browsers are popular in the network:
- Firefox 3.6 + (Firefox 4 supports non-vendor prefixed version)
- Opera 10 + (Opera 9.5 supports background-size but not the values of cover)
- Chrome Whatever +
- IE 9 +
- Safari 3 +
Goltzman found a solution that allows you to work in IE hack
sizingMethod = 'scale') " ;
But attention! while there may be some problems with the links on the page. By the way, a little later Matt Litherland added that the code is, in principle, can be used but this can not be used html or body elements and the need to implement all of a div with 100% width and height.
CSS -hack # 1
Is an alternate version of Doug Neiner. In this case, use the built-in page element <img>, which can be resized in any browser. Set the value of min-height, which helps to fill the browser window vertically and put a 100% width, which fills the page horizontally. Also set min-width so that the image has never been smaller than it actually is.
Next option is used to hack @ media to test whether your browser window smaller than the image and use the percentage of properties left and margin-left align image center.
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 all versions of high-quality browser - Safari / Opera / Firefox and Chrome. For IE, as always has its own nuances:
- IE 9 - works;
- IE 7/8 - often functioning properly, but centers the image is smaller than the browser window;
- IE 6 - can be customized, but who needs this browser.
CSS -hack version 2
Another variant of the solution by using CSS styles is to place the image inside the page with a fixed position in the upper left corner, then set the min-width and min-height to 100% while maintaining aspect ratio.
<img src="images/bg.jpg" id="bg" alt="">
# Bg { position : fixed ; top : 0 ; left : 0 ; / * Preserve aspet Ratio * / min-width : 100% ; min-height : 100% ; } However, it is not possible to center the image, which, in principle, I would like to do. Therefore, we add an external image for the DIV. It is twice as large than the size of the browser window, and then the picture will keep the aspect ratio, close all your browser window and still be in the center.
<div id="bg"> <img src="images/bg.jpg" alt=""> </ Div>
#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%; } Hack works:
- Safari / Chrome / Firefox (very early versions were not tested, but in the latter works well)
- IE 8 +
- Opera (any version) and with both IE both are equally buggy with an error of positioning.
The method of jQuery
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 than or less than the current ratio of the browser window. If less, then we can only use the width = 100%, while the width and height of the window will be equally populated. If there are - you can specify only the height = 100% to fill the entire window.
Access to all data goes through JavaScript, use the following codes:
<img src="images/bg.jpg" id="bg" alt="">
# Bg { position : fixed ; top : 0 ; left : 0 ; } . bgwidth { width : 100% ; } . bgheight { height : 100% ; } $ (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"); }); In my opinion, centering in this case is not made (as I understand it), but it can be done. Supports most desktop browsers, including IE7 +. Finally the author of articles about hacks prepared a set of sample files, which are all implemented - you can download it here . In comments to the original article, also contains some information and discussion, but most of the important details in the form author added apreytov to the post and I have it also translated and displayed. Of course, to understand all this help and examples. In general, if not permanent, "jokes" from IE7 all these hacks would be ideal.
PS Bzauzery - the main tool for the user on the Internet, and the best firefox plugins to help make it as convenient, fast with new features and capabilities.
Want to buy a book? - Not necessarily go to the store because it is now online bookstore online store allows you to do everything over the network - to select, pay and arrange delivery to your home.
0 comments:
Post a Comment