These trailing images.
I love designers who paint "impossible" sites. It does not give a sour taste, makes you look for new layout solutions. One of these solutions was the use of "rubber non-repeating background."
The solution is based on the relationship between the vertical and horizontal coordinates of the image. In other words, if you specify only the height of the picture, the width will change according to the original proportions.
The idea is that small in size (and in terms of volume) background image is inserted not through the style sheet in the body , but directly via the img tag on the site page.
HTML:
<
CSS:
')
Visual implementation of the method: http://marow.ru/site/sadik/40/
The advantage of this method of inserting a background image in reducing the size of the original image. This does not apply to images that require high definition. Although as practice shows, the background image in most cases is something blurred and amorphous.
The disadvantage is that this method does not correspond to the considerations of semanticity and the separation of structure from content.
It also loses the ability to specify the values of margin and padding for the body tag. Otherwise, the picture will not stretch to full screen.
The main thing.
In ie6, when you hover on the background created in this way, the ImageToolbar window appears, which spoils the whole impression of the deed. Fortunately, this is quite painless. It is enough to install a meta tag in the “head” of the site that prohibits the ImageToolbar to appear on the entire page area:
<
In addition to using as a background image, the effect of depending on the height and width can be applied when you need to create a block whose height will vary depending on its width (for example, when scaling the page). It is enough just to place a transparent image with given proportions inside this block.
Example.
The solution is based on the relationship between the vertical and horizontal coordinates of the image. In other words, if you specify only the height of the picture, the width will change according to the original proportions.
The idea is that small in size (and in terms of volume) background image is inserted not through the style sheet in the body , but directly via the img tag on the site page.
HTML:
<
img src="url" class="body-img" alt="" title="" />
CSS:
.body-img{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
}
')
Visual implementation of the method: http://marow.ru/site/sadik/40/
The advantage of this method of inserting a background image in reducing the size of the original image. This does not apply to images that require high definition. Although as practice shows, the background image in most cases is something blurred and amorphous.
The disadvantage is that this method does not correspond to the considerations of semanticity and the separation of structure from content.
It also loses the ability to specify the values of margin and padding for the body tag. Otherwise, the picture will not stretch to full screen.
The main thing.
In ie6, when you hover on the background created in this way, the ImageToolbar window appears, which spoils the whole impression of the deed. Fortunately, this is quite painless. It is enough to install a meta tag in the “head” of the site that prohibits the ImageToolbar to appear on the entire page area:
<
meta http-equiv="imagetoolbar" content="no" />
In addition to using as a background image, the effect of depending on the height and width can be applied when you need to create a block whose height will vary depending on its width (for example, when scaling the page). It is enough just to place a transparent image with given proportions inside this block.
Example.
Source: https://habr.com/ru/post/52548/
All Articles