There is a 2500 x 862 picture that I want to set as the background (a) of one of the blocks. The picture must also adapt as the screen size decreases inside the block. I used the background-size: contain property ; which is not bad, almost like in boosttrap class img-response, only for images. But there is one thing, but when you decrease the screen, the width decreases (the picture adapts) = the image height also decreases ( but not the block! ) And a hole is made in the div. As I understand height is not rubber, but I can not register it because without this, the div disappears altogether. What should I do, so that heigth would move along with the resizing of the image and not remain the same 635px?

.bot{ height: 635px; background-image: url(../img/bottom.png); background-repeat: no-repeat; background-size: contain; }
  • one
    try to specify height in vw and not in px .. not the best solution, but in principle it should work - Darth
  • @Darth, thanks, it solves the problem to some extent) - AlexeyAl pm

4 answers 4

The elastic background image can be made using padding-top: 56.25% or padding-bottom: 56.25%;

for example, like here.

http://codepen.io/anon/pen/JdoxgJ

You can read more about responsive background images here - http://habrahabr.ru/post/157817/

    in this case, it's better to use img and not background-image. or it will be necessary to adjust the height of the block using js. The answer to your question on the link

    code: html

     <div class="bot"> <img src="http://noxblog.ru/uploads/posts/2012-02/1329243992_guitar-and-leads_1600_mini.jpg" alt="" /> </div>

    css

     img{ display: block; max-width: 100%; height: auto; } .bot{background: #ccc; max-height: 600px; background-repeat: no-repeat; background-size: contain; }
    • Thanks for the answer, it is clear that it is better to use <img, but there is such a thing that it will be necessary to lay this img on top of the text and the pictures, which for me will cause an utter confusion. The absolute positioning of the blocks on top of the pictures went and went, tried - confused. - AlexeyAl

    Maybe you just need background-size: cover; ? It is like a contain , only it doesn’t leave any holes anywhere (instead it cuts off the non-tangled picture).

    • I tried it) as a last resort, but it overlaps the picture ... - AlexeyAl
    • And, I did not pay attention to the "heigth moved", then yes, it will not go, probably you need javascript - andreymal

    Try:

     backgrounnd-size: cover;