Unwanted sticky background image on keyframe animation - html

Question

I've made a simple css key frame animation that occurs when the page is loaded. However, the page background-image sticks to the text. You can see my problem here
https://codepen.io/gavdraws/pen/OmpEjK
Any ideas what I'm doing wrong?
Cheers

Answer 1

You have applied a background-image to .home and the text elements have class .home, so each of them has a background-image.
I think you want that background on the element that wraps the text elements (.pageCont) - not every .home element.
/* - - - - - Nav Icons - - - - - */
/* Profile */
$(document).ready(function(){
$("#top").hover(function() {
$("#profile").css("background-image", "url(img/nav-icons/Profile-light.png)");
}, function() {
$("#profile").css("background-image", "url(img/nav-icons/Profile-dark.png)");
});
});
/* CV */
$(document).ready(function(){
$("#left").hover(function() {
$("#cv").css("background-image", "url(img/nav-icons/CV-light.png)");
}, function() {
$("#cv").css("background-image", "url(img/nav-icons/CV-dark.png)");
});
});
/* Contact */
$(document).ready(function(){
$("#bottom").hover(function() {
$("#contact").css("background-image", "url(img/nav-icons/Contact-light.png)");
}, function() {
$("#contact").css("background-image", "url(img/nav-icons/Contact-dark.png)");
});
});
/* Work */
$(document).ready(function(){
$("#right").hover(function() {
$("#work").css("background-image", "url(img/nav-icons/Work-light.png)");
}, function() {
$("#work").css("background-image", "url(img/nav-icons/Work-dark.png)");
});
});
html, body {
height:100%;
width: 100%;
margin:0;
padding:0;
}
h2{
font-family: 'Lato', sans-serif;
font-size: 33pt;
font-style: bold;
text-transform: uppercase;
}
h2.home{
color: #EDEDED;
}
p{
font-family: 'Lato', sans-serif;
font-size: 12pt;
}
p.home{
color: #EDEDED;
}
/*.preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
z-index: 2000;
background-image: url(../gfx/logo/logo.gif) !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}*/
/*#line{
position: relative;
top: 50%;
bottom: 50%;
}*/
.frame {
position: absolute;
z-index: 1000;
}
.frame.rightFrame {
top: 0px;
right: 0px;
border-right: 45px solid #EDEDED;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
height: 100%;
box-sizing: border-box;
}
.frame.rightFrame:hover{
border-right: 45px solid #F1612F;
cursor: pointer;
}
.frame.leftFrame {
top: 0px;
left: 0px;
border-left: 45px solid #EDEDED;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
height: 100%;
box-sizing: border-box;
}
.frame.leftFrame:hover{
border-left: 45px solid #F1612F;
cursor: pointer;
}
.frame.topFrame {
top: 0px;
left: 0px;
border-top: 45px solid #EDEDED;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
height: 0px;
width: 100%;
box-sizing: border-box;
}
.frame.topFrame:hover{
border-top: 45px solid #F1612F;
cursor: pointer;
}
.frame.bottomFrame {
bottom: 0px;
left: 0px;
border-bottom: 45px solid #EDEDED;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
height: 0px;
width: 100%;
box-sizing: border-box;
}
.frame.bottomFrame:hover{
border-bottom: 45px solid #F1612F;
cursor: pointer;
}
.pageCont{
position: absolute;
top: 45px;
left: 45px;
right: 45px;
bottom: 45px;
z-index: 950;
overflow: hidden;
}
/* - - - - - Icons formatting - - - - - */
.menuIcon {
z-index: 1001;
cursor: pointer;
}
/* Profile */
.menuIcon#profile {
position: relative;
margin: 0 auto;
width: 45px;
height: 45px;
background-image: url(../img/nav-icons/Profile-dark.png);
background-repeat: no-repeat;
}
#profile:hover ~ .topFrame {
border-top: 45px solid #F1612F !important;
}
#profile:hover {
background-image: url(../img/nav-icons/Profile-light.png) !important;
}
/* CV */
.menuIcon#cv {
top: 50%;
margin-top: -15px;
position: absolute;
width: 45px;
height: 45px;
background-image: url(../img/nav-icons/CV-dark.png);
background-repeat: no-repeat;
}
#cv:hover ~ .leftFrame {
border-left: 45px solid #F1612F !important;
}
#cv:hover {
background-image: url(../img/nav-icons/CV-light.png) !important;
}
/* Contact */
.menuIcon#contact {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 0 !important;
width: 45px;
height: 45px;
background-image: url(../img/nav-icons/Contact-dark.png);
background-repeat: no-repeat;
}
#contact:hover ~ .bottomFrame {
border-bottom: 45px solid #F1612F !important;
}
#contact:hover {
background-image: url(../img/nav-icons/Contact-light.png) !important;
}
/* Work */
.menuIcon#work {
top: 50%;
right: 0;
margin-top: -15px;
position: absolute;
width: 45px;
height: 45px;
background-image: url(../img/nav-icons/Work-dark.png);
background-repeat: no-repeat;
}
#work:hover ~ .rightFrame {
border-right: 45px solid #F1612F !important;
}
#work:hover{
background-image: url(../img/nav-icons/Work-light.png) !important;
}
.pageCont{
background-image: url("http://www.codeandpepper.com/assets/gfx/start/slide_3.jpg") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}
.profile-pic{
position: relative;
margin-top: 30px !important;
width: 150px;
height: auto;
text-align: center;
animation: fadeuptwo 0.8s ease-out forwards;
/* Safari and Chrome */
-webkit-animation: fadeuptwo 0.8s;
}
.centre-div{
text-align: center;
position: relative;
margin: 0 auto !important;
margin-top: 50px !important;
width: 420px;
height: 80%;
animation: fadeup 0.9s ease-out forwards;
/* Safari and Chrome */
-webkit-animation: fadeup 0.9s;
}
#keyframes fadeup {
from {
top: 200px;
opacity: 0;
}
to {
top: 0px;
opacity: 1
}
}
#-webkit-keyframes fadeup {
/* Safari and Chrome */
from {
top: 200px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
#keyframes fadeuptwo {
from {
top: 200px;
opacity: 0;
}
to {
top: 0px;
opacity: 1
}
}
#-webkit-keyframes fadeuptwo {
/* Safari and Chrome */
from {
top: 200px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
a {
color: #F1612F;
display: inline-block;
position: relative;
text-decoration: none;
cursor: pointer;
}
a:after {
background-color: currentColor;
bottom: 0;
content: '';
display: inline-block;
height: 2.5px;
left: 0;
position: absolute;
right: 0;
-moz-transition: left 0.15s ease-out,right 0.15s ease-out;
-o-transition: left 0.15s ease-out,right 0.15s ease-out;
-webkit-transition: left 0.15s ease-out,right 0.15s ease-out;
transition: left 0.15s ease-out,right 0.15s ease-out;
}
a:hover:after {
left: 50%;
right: 50%;
-moz-transition: left 0.15s ease-in,right 0.15s ease-in;
-o-transition: left 0.15s ease-in,right 0.15s ease-in;
-webkit-transition: left 0.15s ease-in,right 0.15s ease-in;
transition: left 0.15s ease-in,right 0.15s ease-in;
}
/* Responsive: Small Desktop */
#media (max-width: 640px) {
}
/* Responsive: Mobile */
#media (max-width: 640px) {
.frame{
display: none !important;
}
.pageCont{
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.menuIcon{
display: none !important;
}
.centre-div{
width: 90%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!--<div class="preloader"></div>-->
<div class="menuIcon" id="profile"></div>
<div class="menuIcon" id="cv"></div>
<div class="menuIcon" id="work"></div>
<div class="menuIcon" id="contact"></div>
<div class="frame rightFrame" id="right"></div>
<div class="frame leftFrame" id="left"></div>
<div class="frame topFrame" id="top"></div>
<div class="frame bottomFrame" id="bottom"></div>
<div class="pageCont home">
<div class="centre-div">
<img class="profile-pic" src="img/me_1#2x.png">
<h2 class="home">Hi, I'm Gavin.</h2>
<p class="home">
A graphic and UX designer with excellent communication and design skills with a proven record of delivering creative and innovative design solutions. Welcome to my online Portfolio.
</p>
<p class="home">
I have passion for both digital and print design, with a forward-thinking mentality and innovative spark. Please feel free to have a <a>look around</a> and <a>say hello</a>.
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/gavinfriel.js" type="text/javascript"></script>
</body>