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%;
}
Related
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.
I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container.
Like this the website would occupy at least all the windows in it's height.
My HTML code (a part ^^)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
The CSS that goes with this
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/
Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is
Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.
Demo
Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer
I'm trying to implement a div, that looks like a tall and narrow page, like a notebook paper.
I have my content in <div id='centerframe'/> and I thought that a good solution was to use an absolute positioned div for the "paper".
So I wrote the css rules as follows:
div#center_background
{
z-index:-1;
position:absolute;
top:0;
left:130px;
width:900px;
height:100%;
background:rgba(255,255,255,0.9);
}
However, when I add a background image to body, it disappears under the background. I tried setting a positive z-index, than it renders on top of everything in the page, like centerframe, topbar etc. See the picture:
A solution could be setting z-index for all the elements, which I really don't want to do, since I want to use position:absolute;'s as little as possible.
So how can I define this kind of background div without changing other elements' positions and z-indices?
I made a fiddle, but it runs as expected. The strange thing in my real code is, when I load the page, the center_background div appears on top of background of body for a glance, then it disappears.
I don't change anything with JavaScript.
I came across this in my own code a few days back, and setting containing elements to position: relative solved the issue.
When i see your picture, i think that absolute positioning is unnecessary.
You could use fixed for the header, and let main content slides under it :
http://jsfiddle.net/jgYXr/
body {
background:url(http://lorempixel.com/100/100/abstract/10);
}
nav {
position:fixed;
top:0;
left:0;
right:0;
line-height:3em;
background:tomato;
box-shadow:0 0 1em 0.5em;
text-align:right;
}
a {
display:inline-block;
margin:0 0.5em;
padding:0 0.25em;
}
main {
width:80%;
background:rgba(255, 255, 255, 0.75);
box-shadow:0 0 1em 0.3em;
margin:2em auto;
min-height:800px;
}
<nav>
Nav link
Nav link
Nav link
</nav>
<main>
</main>
Search for position: fixed and how to size an element in absolute or fixed via coordinates. See as well to set height of 1 element that has only 1 line of text.
put the z-index value in high range
div#center_background
{
z-index:100;
position:absolute;
top:0;
left:130px;
width:900px;
height:100%;
}
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 use the below piece of code to align a div at the browser bottom
CSS:
/* using the child selector to hide the
following body css from IE6 and earlier */
html>body {
background-color: yellow;
}
#footer {
position:absolute;
right:0;
bottom:0;
background-color:Yellow;
}
HTML:
<div id="footer">
CCC
</div>
This works well when the page fits the page:
But when the page length exceeds then if I scroll the page the div also getting scrolled top:
I have placed the footer div at the top top user control. There are some other controls after the footer div. Will that cause the issue?
#footer {
position: fixed;
right:0;
bottom:0;
background-color:Yellow;
}
absolute is absolute relative to html body, and fixed is with respect to the frame
Difference and other values for position tag are here.
Use the sticky footer CSS: http://www.cssstickyfooter.com/
You should use fixed position instead of absolute.
Use this code:
/* using the child selector to hide the
following body css from IE6 and earlier */
html>body {
background-color: yellow;
}
#footer {
position:fixed;
right:0;
bottom:0;
background-color:Yellow;
}
Are you maybe looking for this http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page ?