Ivan Ivan - 6 months ago 30
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;
    }