How to make background visible?

The essence of the issue in pictures
b431a835d23d4771a69a0bfa3edd621d.png504549face964bd297283a737160d005.png
July 8th 19 at 16:26
4 answers
July 8th 19 at 16:28
Solution
Cut out a picture of a telephone so as the picture green frame. Distances marked with a yellow arrow should be the same and equal to the protruding part of the picture.
Then put it as the background on the outer wide div with centered alignment.
If you have a rubber, try it on different screen sizes to put background-size cover or contain. So it will be possible to achieve a good display.
89271bfdaa034343b0e9a1cc6256924b.jpg
July 8th 19 at 16:30
See.
You have two sheets of paper.

If you go on another put - you will be able to see what is on the bottom?
And what I mean.
The unit clipped at all, so imagine if you cut off a piece of paper with a picture and threw it in the trash.

Why not apply the background directly to the parent? Or make a common parent for these two?
I just thought that m/b has a property which allows to make the background image visible).
When I apply a background to the parent, when you zoom in the background runs (left/right), and I need to fix, so I it to the inner div strapped.

So all the same how to do? - moses_Legros commented on July 8th 19 at 16:33
:
You have already answered:
"Or to make a common parent for these two?"

This is the solution :) - Catalina20 commented on July 8th 19 at 16:36
try to position the background. background: url(../image.jpg) center center no-repeat; well or here - alberto.Turner51 commented on July 8th 19 at 16:39
Although wait) I Think I misunderstood you. It looks like you're just the block size with the picture incorrectly configured. Here she is clipped. Can code to show? - Catalina20 commented on July 8th 19 at 16:42
: posted code) - moses_Legros commented on July 8th 19 at 16:45
: try using pseudo-elements to do then
which block in the z-axis above? that make him a pseudo-element with this image. - Durward_Osinski commented on July 8th 19 at 16:48
July 8th 19 at 16:32

<div class="third_stage">
 <div class="bg_4">
 <div class="text_bg text_bg_4">
 <h2>Stage 3</h2>
<h2>Design</h2>
 <p>Prepare the guideline started to design the application.</p>
 <p>the Interface is made in a “flat” style. The design was very important to take into account the simplicity and speed of transformation of the interface at the other games in the next versions of the application. Selected style perfectly suited for this task.</p>
 <p>in Addition to the interface elements and icons designed and developed a unique illustration for main menu — “Play”, “Prizes”, “Rankings”.</p>
</div>
</div>
</div>


.third_stage {

 background: linear-gradient(30deg, #315a7b 30%, #6b5a7b 30%, #6b5a7b 100%);
 min-width: 1235px;
 position: relative;
 z-index: 20;
}

.bg_4 {
 background: url(../images/phone.png) no-repeat 200px top;
 position: relative;
 z-index: 3;
 margin: 0 auto;
 height: 4431px;
 width: 1235px;

 outline: 1px solid red;
}

.text_bg_4 {
 background: transparent;
 top: 200px;
 left: 0;
}
July 8th 19 at 16:34
perhaps using z-index ?

Find more questions by tags HTMLCSSLayout