Here's an example? http://prntscr.com/b4fna5 I cut the layout into pictures: Jesus with a star, logo, temple, pigeon, branch Tell me, poz-hundred.

header{ width:100%; height:400px; } #pict_ix{ height:798px; background:url('images/ix.png') no-repeat; } #logo{ position:relative; top:45px; left:250px; background:url('images/logo.png') no-repeat; } 
 <body> <div id="swap"> <header> <div id="pict_ix"> </div> <div id="logo"> </div> <div id="church"> </div> <div id="bird"> </div> <div id="tree"> </div> </header> </div> </body>

  • Cut the dude with a strange yellow hat, some kind of building on the right and a pigeon. The background (without an inscription) can be set as background , the cut pictures should be positioned as more convenient, and the inscription can be inserted into the div and decorated with styles (although it can also be a picture, but this is bad practice). - user207618
  • @Other, so you propose to do a div in html instead of img , and in css set background:url('путь к картинке') ? Then in html will be empty divas ... Position it as? - NNN
  • @NNN please clarify: 1. Does this block go the full width of the site? 2. Does the site have to adapt to the width of the user's screen (i.e. adaptive layout) or a site with a fixed width? - olegatro
  • @NNN 3. What is the font used? if it is commercial, then it is worth thinking that it would be easier to save the entire block as a picture or separately as a picture (which is not very good practice, but in this situation it is quite acceptable) - olegatro
  • @Olegatro, Thanks for understanding ... That's what I tried to do. Yes, I have a poor understanding of absolute and relative positioning. Maybe lit-ra there are examples? So do the layout? 1. This unit is full width. I make a fixed layout, it’s far from adaptive to me. 3. Segoe Script font. I would like to check kroussbrauzernost. Do you know how? It must be additionally installed, but I have not yet become. - NNN

1 answer 1

you can make the header {position: relative;}, for elements #pict_ix, #logo {position: absolute;}. The fact is that for them the header is a genitive element. And If the parent's position value is specified as fixed, relative or absolute, then the coordinates are read from the edge of the parent element. Then you can already have each element of the picture through the properties top, bottom, left, right set the coordinates relative to Header.

In the future, if you decide to make an adaptive layout for different screens, you can easily change the coordinates of each element via @media or for example, if the screen width is less than ... px generally disable the entire header block and replace it with another.