Я очень новичок в Front-end development и Foundation.
Я пытаюсь получить <div class="main-header">
как полноэкранное изображение, которое быстро меняется.
Может ли кто-нибудь сказать мне, что я делаю неправильно? Он масштабируется правильно, но не показывает полное изображение. Я также хотел, чтобы <div class="large-6 large-offset-6 columns">
сидел над ним на мобильном устройстве - это возможно?
HTML:
<!-- MAIN HEADER -->
<div class="main-header">
<div class="row">
<div class="large-6 large-offset-6 columns">
<h1 class="logo">BleepBleeps</h1>
<h3>A family of little friends<br>that make parenting easier</h3>
</div> <!-- END large-6 large-offset-6 columns -->
</div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->
CSS:
.main-header {
background-image: url(../img/bb-background2.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
}
h1.logo {
text-indent: -9999px;
height:115px;
margin-top: 10%;
}