Can anyone tell me how this effect is created?
Link to desired effect
Whereby the header bar and image stay static but as you scroll down the webpage the content area overlaps the image but not the header.
I thought that maybe the header and bg image and content area all have different z-index's but I just cant seem to replicate this effect.
Below is what I have been playing around with locally:
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#head{
width:2000px;
height:180px;
background-color:#666;
position: fixed;
z-index: 10000;
}
#image{
width:2000px;
height:500px;
background-color:#F00;
}
#content{
width:2000px;
height:1000px;
background-color:#090;
}
</style>
<div id="head">HEAD</div>
<div id="image">IMAGE</div>
<div id="content">CONTENT</div>
Set the body (or wrapping element) to have a background with:
body {
background-attachment: fixed;
}
More: http://www.w3schools.com/cssref/pr_background-attachment.asp
This forces the background to stay put, even with page scroll.
Then add your content into the body...
It will scroll on by, while the background of the body is static.
EXAMPLE: https://jsfiddle.net/a8qpxzy2/2/
Here's how they did it.
The header and bg-image are both fixed. While the content is set to relative.
Headers z-index is 10000 , bg-image z-index is 20 and content z-index is 2000.
You should know how it works with these informations.
Related
I understand how everything is supposed to work but I have no idea why it is not working. I am trying to have my page to have two main fixed divs. The left one stays the same at all times and the right one overflow downward when there is more content.
This as of right now works perfectly. The problem is the body or my #bodywrapper divs or anything I make to have a min-width to store the #header and #bodyholder so that when the page shrinks to lower than 1280px horizontally it will require the whole page to overflow/produce a scrollbar so that you can see both the #header and #bodyholder divs. I have attached examples of what I am talking about.
since I do not have 10 rep points yet so here are the links to the images:
correct:
s1190.photobucket.com/user/obancooper/media/ex-correct_zpssnk69nck.png.html
wrong:
s1190.photobucket.com/user/obancooper/media/ex-wrong_zpsszf6kkoj.png.html
To help, the following is the best I can describe in HTML/CSS what the problem is:
html:
<div id="bodywrapper">
<div id="header">
</div>
<div id="bodyholder">
</div>
</div>
CSS:
#header { top:18px;
left:0px;
padding-right:0px;
height: 100%;
width: 18%;
position:fixed;
margin:0px;}
#bodyholder {width:82%;
min-width:1050px;
right:0px;
overflow:auto;
height:100%;
position:fixed;
}
#bodywrapper {
width:100%;
min-width:1280px;
overflow:scroll;}
My site is pumpingfe.com.
In the wordpress-theme Avada (A demo site) I can see that they're using some background-effect for overlapping both backgrounds and text-elements at the same time. The first heading is overlapped by the "Who we are" section. How do they do this?
Look for the div with the class tfs-slider flexslider main-flex
<div class="tfs-slider flexslider main-flex" ...>
You will notice that it has the attribute position: fixed. This means that it does not scroll with the content. In addition, they have changed the z-index properties of various elements so that it stays beneath the menu at the top and the content that flows up over it.
Basically this resumes down to this CSS property:
background-attachment: fixed;
Here I have a basic example for you: http://jsfiddle.net/1j3w8ru6/
Here is a really simple working example
What we are doing here is setting the position of the first heading to "fixed", pushing the content just below the screen with "margin-top", and setting the content's z-index to a higher value than that of the first heading.
Here is the CSS:
html,
body {
width:100%;
height:100%;
}
#heading {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#000000;
z-index:2;
}
#content {
width:100%;
position:relative;
z-index:3;
background:#FFFFFF;
margin-top:100%;
}
First time asking a question :)
My header DIV has a background that is curved like a wave. I have a sidebar floated to the right located in a DIV underneath the header DIV. The background image for header curves up right where sidebar is which leaves a gap where sidebar hits the bottom of the header div (because obviously divs aren't curved). I need the background of sidebar to extend underneath header so there is no gap. What should I do?
HTML:
<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>
CSS:
#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
background-repeat:no-repeat;
text-align:center;
}
#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;
}
#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;
}
#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
border-right:thick #558c21 solid;
border-left:thick #558c21 solid;
}
![Here is a screenshot of what it looks like currently. The sidebar has no content so it is narrow but I want it to extend up behind the header image so there is no gap.1
Not 100% sure on what you're wanting to achieve, but if you're wanting the sidebar to show behind the header and extend upwards, try adding to the sidebar style:
margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;
Not really sure if I understand you correctly but try to add:
position: relative;
top: -10px;
to #side-bar as you can see here http://jsfiddle.net/NpZJV/
If I may advice, don't use % for width/height and positions use px instead.
You could use CSS3 to make a background size, check it out to see if it solves your problem.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Try using
background-size: 600px 2921px;
You might be able to get it to fit
I have been looking for an answer to this question all over the interwebs, but I just can't find the answer.. I have a transparent header filled with a background image that is the same as my background, and I want my main div to scroll underneath it so the text is hidden. Here is the HTML:
<body>
<div class="wrapper">
<div class="top">
<!-- This is my header -->
</div>
<div class="main">
[.....]
</div>
And here is the CSS:
.top {
background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
margin-top:0px;
height:100px;
width:1000px;
margin-left:auto;
margin-right:auto;
vertical-align:central;
padding-left:0px;
padding-right:opx;
}
.main {
position:absolute;
top:100px;
bottom:20px;
left:0;
right:0;
width:990px;
margin:0 auto;
padding-top:10px;
padding-left:5px;
padding-right:5px;
z-index:-1;
}
I have made a jsFiddle which can be found here: http://jsfiddle.net/qcaJJ/. Can you please help me out on how to get this working? Thanks in advance!
ps. Please don't mind the footer, I've used the footer from another page of mine, I don't want this one on this page :p
pps. If anyone knows a way to let the nav stay on it's place and the main2 div scroll, you're my hero! Kinda new to HTML and CSS..
In addition to using fixed position for the header, as the other answers pointed out, you're also using a background image with transparency, so when the main section scrolls underneath, you still see it. You need to add a background color like so, to make sure that the header div covers over what's scrolling underneath:
.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
See my JSFiddle here: http://jsfiddle.net/qcaJJ/3/
You need a fixed position for your header rather than an absolute positioning for all the rest of your page.
.header{
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background:red;
}
.content{
margin-top:100px;
font-size:180%;
}
The top must be position:fixed for that to work. This ensures that it is always stuck at the top of the screen.
You may also want to set the z-index to something like 1000 so that it always stays on top of everything else.
I have a div:
clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;
And a html, body:
html, body {
height:100%;
width:100%;
}
/* Body styles */
body {
background:url(../images/background.png) top center no-repeat #101010;
color:#ffffff;
}
My code is basically 20 loren ipsum paragraphs followed by the div.
Now i tried setting position to relative and absolute and etc but with absolute the div aligns itself to the bottom of the screen so when you scroll down the div scrols with it
I tried setting it to relative but when theres not enough content to make the page scroll, the div is not at the bottom of the page.
I tried fixed but that just fixed it.. no use to me
How can i get the div to be at the bottom of the screen and page depending on if theres scroll or not
Ok, fixed and working :D Hope it does what you want it to.
Preview here: http://jsfiddle.net/URbCZ/2/
<html>
<body style="padding:0;">
<div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
test content :D
</div>
<!--Content Here-->
</div>
</body>
</html>
Shorter solution:
.footer {
bottom: 0%;
position: fixed;
}