Ivan Ivan - 2 months ago 9
Javascript Question

Background image overlaps another div

I'm trying to stop the .background image from overlapping skills div when viewport gets taller or wider. I'v tried many different things and i have no luck. Please help me! I'm fairly new to this so please don't be surprised if its something simple stupid thing that I did that's causing this problem. Thanks!



$(document).ready(function(){

//MENU
$('.menu-icon').click(function(){
$('.menu-nav').animate({
height: 'toggle'
}, 200
);
});


//SKILLS
flagScroll = true;
$(window).scroll(function() {
if ($(this).scrollTop() > 40 && flagScroll) {
// apply effects and animations
flagScroll= false;
$('.html').animate({
marginRight: 0,
width: 100
}, 2200
);

$('.css').animate({
marginRight: 0,
width: 90
}, 2200
);

$('.javascript').animate({
marginRight: 0,
width: 40
}, 2200
);
}
});

});

/*$mat-black: #37474F;*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
/*background:transparent;*/
}

body {
line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

nav ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

* h1 {
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
}

header {
background-color: black;
height: 420px;
}

header .background {
opacity: 0.2;
background-image: url(http://lorempixel.com/400/200/sports/1);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
height: 74%;
position: absolute;
overflow: hidden;
}

header nav {
width: 100%;
z-index: 2;
}

header .menu-icon {
padding: 5px 0 5px 10px;
cursor: pointer;
width: 50px;
}

header .menu-icon img {
width: 50px;
height: 50px;
}

header .menu {
width: 100%;
border-top: solid #18FFFF 1px;
border-width: 70%;
height: 0;
}

header .menu:before {
content: " ";
display: block;
width: 90%;
height: 5px;
margin: 0 auto;
left: 0;
right: 0;
background-color: #18FFFF;
opacity: 1;
}

header .menu .menu-nav {
z-index: 2;
position: absolute;
background-color: #18FFFF;
width: 90%;
margin: 0 auto;
left: 0;
right: 0;
border-bottom-radius: 5px;
display: none;
}

header .menu .menu-nav ul {
margin-top: 20px;
}

header .menu .menu-nav ul li {
text-align: center;
padding: 10px;
list-style: none;
border-radius: 5x;
font-size: 2em;
cursor: pointer;
}

header .menu .menu-nav ul li:hover {
/*background-color: #607D8B;*/
background-color: black;
color: #18FFFF;
}

header .menu h1 {
text-align: center;
}

header .menu .menu-social {
width: 155px;
margin: 30px auto;
}

header .menu .menu-social img {
cursor: pointer;
margin: 0 1px 0 1px;
float: left;
padding-top: 20px;
padding-bottom: 20px;
}

header .menu .menu-social img:hover {
position: relative;
top: -5px;
}

header .bio {
width: 70%;
margin: 0 auto;
margin-bottom: 0;
position: relative;
}

header .bio .hello h1 {
font-size: 3.4em;
color: #18FFFF;
text-align: center;
padding-bottom: 20px;
padding-top: 45px;
font-family: 'Bowlby One SC', cursive;
}

header .bio .desc p {
color: white;
text-align: center;
line-height: 25px;
padding-bottom: 80px;
}

header img {
display: block;
margin: 0 auto;
padding-bottom: 3px;
cursor: pointer;
position: relative;
}

.skills-2 {
width: 90%;
margin: 15px auto;
background-color: white;
overflow: hidden;
border: solid black 1px;
border-radius: 5px;
}

.skills-2 h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}

.skills-2 .my-skills {
width: 50%;
padding-top: 20px;
float: left;
padding-bottom: 20px;
}

.skills-2 .my-skills ul li {
text-align: center;
padding-bottom: 10px;
}

.skills-2 .graph {
float: left;
width: 50%;
padding-top: 20px;
}

.skills-2 .graph .html {
width: 1px;
}

.skills-2 .graph .css {
width: 1px;
}

.skills-2 .graph .javascript {
width: 1px;
}

.skills-2 .graph .bar {
height: 10px;
background-color: #2962FF;
margin-bottom: 18px;
}

.work {
width: 100%;
background-color: white;
color: black;
}

.work:before {
/*@include divider;*/
}

.work h1 {
text-align: center;
font-size: 3em;
padding-top: 40px;
padding-bottom: 20px;
color: black;
}

.work p {
text-align: center;
display: block;
width: 70%;
margin: 0 auto;
padding-bottom: 60px;
line-height: 20px;
padding-top: 30px;
}

.work p span {
display: block;
padding-top: 10px;
font-size: 0.8em;
line-height: 15px;
}

.work h2 {
text-align: center;
padding-top: 50px;
padding-bottom: 20px;
font-size: 1.3em;
}

.work .site1 {
width: 100%;
}

.work .site1 img {
display: block;
width: 90%;
margin: 0 auto;
padding-bottom: 5px;
box-shadow: 8px 10px 35px black;
}

.work .site2 {
width: 100%;
}

.work .site2 img {
display: block;
width: 90%;
margin: 0 auto;
padding-bottom: 5px;
box-shadow: 8px 10px 35px black;
}

.contact {
background-color: black;
overflow: hidden;
color: white;
}

.contact h1 {
text-align: center;
font-size: 3em;
padding-top: 40px;
padding-bottom: 20px;
}

.contact form {
padding-top: 50px;
text-align: left;
width: 85%;
margin: 0 auto;
}

.contact form label p {
float: left;
width: 100%;
padding-bottom: 15px;
}

.contact form input {
width: 100%;
float: left;
margin-bottom: 20px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 2px solid #18FFFF;
height: 30px;
font-size: 18px;
background-color: black;
color: white;
}

.contact form input:focus {
outline: none;
}

.contact form textarea {
width: 100%;
border: #18FFFF solid 2px;
background-color: black;
font-size: 18px;
margin-top: 20px;
color: white;
}

.contact form input[type=submit] {
width: 30%;
padding: 5px;
margin: 20px auto;
border-bottom: none;
border: #18FFFF solid 1px;
background-color: black;
color: white;
}

.contact form input[type=submit]:hover {
color: black;
background-color: #18FFFF;
-webkit-transition: background-color 100ms linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 100ms linear;
-ms-transition: background-color 100ms linear;
transition: background-color 100ms linear;
}

<title>Ivan B</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<!--FONTS-->
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<img src="images/Menu-64.png">
</div><!--menu-icon-->
</nav>
<div class="menu">
<div class="menu-nav">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
</ul>

<div class="menu-social">
<img src="images/Instagram.png" alt="instagram" />
<img src="images/Twitter.png" alt="twitter" />
<img src="images/LinkedIn.png" alt="linkedin" />
</div>
</div><!--menu-nav-->
</div>
<div class="background">
</div><!--BACKGROUND-->
<div class="bio">

<div class="hello">
<h1>Hello...</h>
</div><!--Hello-->

<div class="desc">
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis, nominavi deseruisse eu vis. Pri eruditi apeirian periculis at, summo scriptorem has in.</p>
</div><!--desc-->
</div><!--Bio-->
<img src="images/arrow-down.png">
</header>

<div class="skills-2">
<h1>Skills</h1>
<div class="my-skills">
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</div><!--My SKills-->
<div class="graph">
<div class="html bar">
</div>
<div class="css bar">
</div>
<div class="javascript bar">
</div>
</div><!--Graph-->
</div><!--SKills 2-->
<div class="work">
<h1>Work</h1>
<div class="site1">
<h2>A very clear statement <br/>of your offer</h2>
<img src=images/site1.png>
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis, <br/><span>*Lorem ipsum dolor sit amet, ut movet persius fierent vis,</span></p>
</div><!--Site 1-->
<div class="site2">
<h2>The Yalow</h2>
<img src="images/site2.png">
<p>Lorem ipsum dolor sit amet, ut movet persius fierent vis,<br/><span>Lorem ipsum dolor sit amet, ut movet persius fierent vis,</span></p>
</div><!--Site 2-->
</div><!--Work-->
<div class="contact">
<h1>Contact</h1>
<form action="contact.php" method="post">
<label>
<p>Name *</p>
<input type="text" name="name">
</label>
<label>
<p>Your E-mail *</p>
<input type="text" name="email">
</label>
<label>
<p>Your message *</p>
<textarea name="message" rows="8" cols="40"></textarea>
</label>
<div id="button">
<input type="submit" name="name" value="Send">
</div><!--button-->
</form>
</div>




Answer

to fix your image overlapping issue, add below changes to your css -

header {
    background-color: black;
    height: 420px;
    position: relative; /* Added */
}    

header .background {
      opacity: 0.2;
      background-image: url(http://lorempixel.com/400/200/sports/1);
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-position: center;
      width: 100%;

      height: 100%;  /* editied */
      top: 0px;     /* added */

      position: absolute;
      overflow: hidden;
    }