Абсолютно позиционированное изображение выходит из относительного деления - PullRequest
0 голосов
/ 31 октября 2019

В заголовке моего сайта у меня есть 2 div (pontok_bal и pontok_jobb), у которых есть фоновые изображения, приведенные в css.

Если я помещу эти 2 div в div контейнера header-main,результат тот же: я не вижу pontok_jobb div.

.header {
  position: relative;
  width: 100%;
}

.pontok_bal{ 
  position:absolute; 
  top:0; left:10px; 
  background:url(../images/assets/pontok_bal.png); 
  background-repeat:no-repeat; 
  width:100%; 
  height:100%; 
 }
.pontok_jobb{ 
  position:absolute; 
  top:0; right:10px; 
  background:url(../images/assets/pontok_jobb.png); 
  background-repeat:no-repeat; 
  width:100%; 
  height:100%; 
 }
<header class="header">
  <div class="pontok_bal"></div>
  <div class="pontok_jobb"></div>
  <div class="header-main container">
    <div class="logo col-md-4 col-sm-4"> <a href="https://corvinstyle.com" title="Corvinstyle"><img id="logo" src="https://corvinstyle.com/images/assets/uj-logo-2.png" alt="Corvinstyle" style="margin-top:30px;"></a> </div>
    <div class="col-md-8 fejlec_div"> <a href="https://corvinstyle.com" title="Corvinstyle"><img class="img-responsive" src="https://corvinstyle.com/images/assets/uj-termekek-2.png" alt="Corvinstyle"></a> </div>
  </div>
</header>

.header div имеет position:relative, а ширина составляет 100%.

Моя проблема в том, что при просмотре сайтана мобильном телефоне или в Chrome я увеличиваю его и никогда не вижу .pontok_jobb div, потому что он гаснет или я не знаю, что он делает.

Вы можете проверить сайт по этой ссылке: Нажмите здесь

Ответы [ 2 ]

0 голосов
/ 31 октября 2019

ширина фонового изображения "pontok_jobb" составляет 1920px, и оно справа. пожалуйста, обрежьте изображение, удалив пустое пространство и поместите фоновое положение справа css.

0 голосов
/ 31 октября 2019

Проблема связана с вашим стилем изображения. Ваше изображение должно соответствовать ширине и высоте вашего div.

Попробуйте использовать это background-size: contain;

...