I am currently working on making my webpage mobile-friendly, or what is commonly referred to as mobile-compatible. One issue I am facing with my page is that it appears fine at a specific size, but when I resize the browser window, the background image overlaps the "Services" title within the <section> element.
If you want to take a look at the jsFiddle for this issue, you can access it here: http://jsfiddle.net/eg18dfy0/4/. Please note that due to limitations, local files are not included in this link.
Normal view:
After resizing:
Here is an excerpt from my code:
HTML snippet that matters:
<header>
<div class="background_image">
</div>
<div class="welcome-text-container">
<div class="row">
<div class="welcome-text1">Welcome!</div>
<div class="welcome-text2">BE GOOFY, TAKE A PICTURE!</div>
<div class="btn-row">
<a href="#services" class="welcome-btn btn-lg">TELL ME MORE</a>
</div>
</div>
</div>
</header>
<!-- services -->
<section id="services">
<div class="container">
<div class="service-title">Services</div>
<div class="service-caption">What we'll do for you</div>
</div>
</section>
CSS:
.background_image {
background-image: image-url("header-bg.jpg");
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%;
position: absolute;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
/* Services */
#services {
padding-top: 110px;
margin-top: 75px;
}
.service-title {
text-align: center;
font-size: 55px;
font-weight: 700;
}
.service-caption {
text-align: center;
font-size: 20px;
}