I can not find the correct solution of my task. It is necessary to scale the picture of the background relative to the size (that is, at least once it is in full size).
For pictures of whose size more screen can be used
background-size: 100% auto;
But if the picture is smaller than the screen, it is simply stretched. And I do not need this.
How can this be done by CSS?
Answer 1, Authority 100%
I will try to explain on your fingers. (here you can touch the working example )
If you write like this:
. Demo {
Background-image: URL (cat.png);
Background-Position: 50% 50%;
Background-Repeat: no-repeat;
}
We will give such wishes to the browser:
- insert on the background of the block with the class “demo” picture with a selection
- Putting it, if possible, in the center of this block
- do not use the “Wind” property, if the background picture is less than this block
Slightly clarify the wishes:
. first {
Background-Size: 100px 100px;
}
- I want the background image to be 100 per 100 pixels; It is not necessary to scale; proportions save no need
Let’s try otherwise:
. Second {
Background-Size: Contain;
}
- I want the background image to take the maximum area of the block at which it will save its proportions and will be seen entirely
and last option:
. Third {
Background-Size: Cover;
}
- I want the background image to closed the whole block, it does not have to be seen entirely, the main thing is to preserve the proportions
As we at the very beginning indicated the location of the background image in the center of the block, first of all will be visible the central part of the image. This can be changed using the background-position
that in the end it will turn out (first, second and third examples one under one):