Hello. In general there was a problem with the divs, I have been worried for several days already.

First, what is needed, then what happens and what does not.

For the background, there is a picture divided into 3 parts for 3 divs. The text should be superimposed on all this composition (all 3, not only the middle part). The left and right parts have fixed sizes, the middle one should be stretched across the width of the text.

enter image description here

It turns out to build them in one line, it turns out to superimpose the text, but to combine one with the other does not work.

If I arrange the text for all three, then the average does not stretch, this is understandable, absolute throws it out of the general flow. If you remove the div with the text, and the text itself is placed in the div id = "center", then the text naturally does not fall on the two extreme ones.

In id = (left, right, center), only properties for background are registered.

<div style="position: relative;"> <div style="position: absolute;"> ТекстТекстТекстТекстТекстТекстТекстТекст </div> <div style="position: absolute;"> <div id="left" ></div> <div id="right"></div> <div id="center"></div> </div> </div> 

If there is a solution only on css, pomgit, if not then write down that it is impossible

    1 answer 1

    Working example:

     body { background: #ccc; } .dd { line-height: 348px; position: relative; display: inline-block; padding: 0 150px; font-size: 50px; white-space: nowrap; } .dd>span { position: relative; z-index: 1; } .dd:before { position: absolute; content: ' '; height: 348px; width: 324px; background: url("http://i.imgur.com/9DnegYW.png") left top; top: 0; left: 0; } .dd:after { position: absolute; content: ' '; height: 348px; width: 324px; background: url("http://i.imgur.com/2tQFf8E.png") right top; top: 0; right: 0; } .dd>i { background: url("http://i.imgur.com/V0OSUzF.png") repeat-x center 43%; height: 348px; position: absolute; top: 0; left: 324px; right: 324px; } 
     <div class='dd'> <span>test test test test</span><i></i> </div> <div class='dd'> <span>test test test test test test test</span><i></i> </div> 

    • Thanks for the help, now everything works, but only when I insert my pictures, the “average background” climbs on two extreme ones and it turns out like this i.imgur.com/JmJITac.jpg - Sergey
    • @Sergey I changed the example, but it uses a white background, should the transparency be preserved? - Crantisz
    • Yes, transparency is needed - Sergey
    • @Sergey Then so - Crantisz