I used this code to position a logo (.logo) on top of a background (.bird-box) and I have an issue with the .logo
When I have my logo's actual height as 100px and I use the code below (where the height is set to 100px, everything works great
.bird-box
position: relative
height: 800px
background:
image: url(../images/background-small.png)
size: auto 800px
position: top center
attachment: fixed
overflow: hidden
.logo
height: 100px
width: 100%
background:
image: url(../images/shardfund.png)
position: center
repeat: no-repeat
position: relative
top: 50%
margin-top: -50px
RESULT with the above code: I have two windows where I view the code: In Chrome and in the browser within the Atom (editor).
In the Atom browser: the logo moves with the scroll (when I scroll down, the logo goes up). Background is static.
In the Chrome browser: the logo moves with the scroll but slower such that when I scroll 800px (the height of the background) the logo disappears. It always stays in the visible background's centre and as the background goes away, so does the logo (apologies if unclear, it's the best verbal explanation I can provide). P.s. this is actually the desired effect! I also tested in the code in Firefox (works like in Chrome - perfect) and in IE10 (works like the Atom explorer - not good!)
However when I resize my actual logo with a height of 200px and I use the code below, then things are different (explained below).
.bird-box
position: relative
height: 800px
background:
image: url(../images/background-small.png)
size: auto 800px
position: top center
attachment: fixed
overflow: hidden
.logo
height: 200px
width: 100%
background:
image: url(../images/shardfund.png)
position: center
repeat: no-repeat
position: relative
top: 50%
margin-top: -100px
After implementing the change, the logo goes to 200px (at least that works) but in regards to movement: - in Chrome, the logo stays static with the background (not the desired outcome) - in the Atom browser it moves with the scroll (not the desired outcome)
QUESTION 1: How can I generally resize the logo and manage to make it stay within the centre of the background until the background disappears during the scrolling (as achieved with the first come in Chrome)
QUESTION 2: How can I make this movement work throughout all browsers?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BlackBird Co.</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<header class="bird-box">
<div class="back-bird"></div>
<div class="logo"></div>
<div class="fore-bird"></div>
</header>
<section class="content">
<article>
<h1>Clothing Store</h1>
<hr>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</article>
<!--Make the webpage scrollable-->
<div style="height: 2000px"> </div>
</section>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/functions.js"></script>
</body>
</html>
I actually researched further the question myself since posting this and came up with the answer, so here it is:
Using javaScript.
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
$('.logo').css({
'transform' : 'translate(0px, '+ wScroll /2 +'%)'
})
});