There is a frame, I want to make it a background in the center, and place blocks in it.

The problem is that as soon as I did not try, if I line up elements relative to it, then when the page scale changes, the elements move beyond the frame. If you position them through the CSS position properties, then problems with center alignment begin.

Here is the frame (filled it with color, dimensions like that of the current one), which I use as a background image with properties

background-position: center; background-repeat: no-repeat;">

frame

But the element that I want to place in it, indented from the top edge of the frame, and centered on the width of the frame.

element

How can it be placed inside the frame so that when scrolling / zooming it is tied to the frame?

 <html> <head> <style type="text/css"> .parent { background-image: url(bg.png); background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; margin: 0 auto; position: relative; } .child{ width: 100%; height: 100%; position: absolute; top: 25%; left: 10%; } </style> </head> <body bgcolor="#000000"> <div class="parent"> <div class="child"><img src="logo.png"></div> </div> </body> </html>
  • It's easier to make a frame, and not to use a background frame. - HamSter
  • @ElenaSemenchenko what do you mean? The frame is a picture, for example, I just filled it with color, what difference does it look like? - Alexan-Dwer
  • I mean that border and background are different properties. - HamSter
  • I don’t even have a speech about a border;) There is only a background. - Alexan-Dwer

2 answers 2

That's the idea so. Horizontally and vertically aligned. You can give a min-width, and then jump from the resolution yet. And so change the .parent width, height and will always be green in the center

 .parent{ width: 50%; height: 300px; margin: 0 auto; border:10px solid blue; position: relative; } .child{ width: 80%; height: 50%; background: lime; position: absolute; top: 25%; left: 10%; } 
 <div class="parent"> <div class="child"> </div> </div>

And here is another 2nd option, using the flex-box;

The flex block of his children is margin: auto; - aligns both horizontally and vertically

 .parent{ display: flex; width: 50%; height: 500px; border:10px solid blue; } .child{ width: 20%; height: 30%; background: lime; margin: auto; } 
 <div class="parent"> <div class="child"> </div> </div>

  • I probably did not explain correctly, see: <html> <head> <style type="text/css"> .parent { background-image: url(bg.png); background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; margin: 0 auto; position: relative; } .child{ width: 100%; height: 100%; position: absolute; top: 25%; left: 10%; } </style> </head> <body bgcolor="#000000"> <div class="parent"> <div class="child"><img src="logo.png"></div> </div> </body> </html> <html> <head> <style type="text/css"> .parent { background-image: url(bg.png); background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; margin: 0 auto; position: relative; } .child{ width: 100%; height: 100%; position: absolute; top: 25%; left: 10%; } </style> </head> <body bgcolor="#000000"> <div class="parent"> <div class="child"><img src="logo.png"></div> </div> </body> </html> <html> <head> <style type="text/css"> .parent { background-image: url(bg.png); background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; margin: 0 auto; position: relative; } .child{ width: 100%; height: 100%; position: absolute; top: 25%; left: 10%; } </style> </head> <body bgcolor="#000000"> <div class="parent"> <div class="child"><img src="logo.png"></div> </div> </body> </html> I have a similar framework. - Alexan-Dwer
  • @ Alexan-Dwer Transfer this to the question - tutankhamun

Decided so:

 <html> <head> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .parent { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; } .block { width: 886px; height: 636px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-image: url(bg.png); background-repeat: no-repeat; } .child{ width: 100%; height: 61px; text-align: center; padding-top: 50px; } </style> </head> <body bgcolor="#000000"> <div class="parent"> <div class="block"> <div class="child"><img src="logo.png"></div> </div> </div> </div> </body> </html>

So far, it seems everything works as I wanted ...