I'm having problems making my "curtain" div transparent if it's outside the fixed DIV. In the example below I'd like to achieve transparency of the parallax-curtain DIV without having to place it inside the parallax DIV.
https://jsfiddle.net/0kfapw35/
I know it can be achieved if the DIVs are nested like so:
<div class="parallax">
<div class="parallax-curtain">
</div>
</div>
https://jsfiddle.net/wamosjk/jfxb0kz1/
Unfortunately, this doesn't work for me. Is that possible?
Thanks in advance!
The problem in your example is that if parallax-curtain is not a child of the parallax element, behind him it's only the body element, which is white. If your change the body element's background-color:red; you'll see that the transparency is indeed applied to parallax-curtain, it's just not visible in your example because it's the same color as the element behind him.
You can place the parallax element behind parallax-curtain, by adding position:sticky; z-index=-1; top:0;: https://jsfiddle.net/x837kwfb/60/
Related
I know there are numerous threads on this subject but I couldn't get any of the suggestions I found to work for me. Whether that's due to novice status or because the code wasn't suitable, I don't know. But I'm now pulling my hair our after trying to get the grey background behind the h2 tag "Attachments" and the two lines that follow it to expand to full width, removing the white spaces that are currently to the left and right of this div.
http://bit.ly/1OVprsc
One approach is to use negative margins and padding to extend the background in both directions.
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
Your grey div is inside g-container div which have width that is not full one. So if you want to have that grey div full width u must change your structure into something like this:
<div class="g-container">
CONTENT
</div>
<div class="grey-div"></div>
<div class="g-container">
CONTENT
</div>
Or you can do it with position absolute but then none of the parent of the grey div shouldn`t be position relative so the grey div can be absolute relative to body.
I have a page with a huge background which is fixed - as in:
body {
background: url(...) no-repeat center center fixed;
}
Now, to remove some focus from the background image, I thought about simply blurring it at the moment the real content starts. Think about a transparent jumbotron, followed by one giant div containing all the content. An example markup:
<div id="navigation">
<nav>...</nav>
</div>
<div id="page">
<div class="transparent-jumbotron">
Big intro to the site goes here
</div>
<div class="content">
The actual content goes here
</div>
</div>
<div id="footer">...</div>
I have been trying out various hints and tricks on the internet - but the most I got was that #page.contents had the site's background - but upon scrolling a bit, it turned out that there was one instance of the background covering the original, and then there was the normal, unblurred background. This contents div also has a semi-transparent background applied through rgba() to darken the background.
So my question is: How can I blur the larger portion of a site, which has a fixed background image but much content that will require scrolling (as in, dynamicaly applying the blur filter)?
You should use opacity property in css
opacity : <A number between 0 and 1, e.g:0.5 1 is fully focused and 0 makes the elmend hidden >;
I'm trying to display a div over a image. When user enters the image the division must display, means on hover effect. But what happens is when I hover the mouse over main division the div displayed under the image.
My code is :
<div class="bgimg">
<img width="100%" height="100%" data-id="1" src="data:image/jpeg;">
<div id="changeBackPicture" style="display: none;">
<a id="ChangeBAKPicture" href="javascript:void(0)">Change BackGround Picture</a>
</div> <-- This division need to display above the image --->
<div class="primg"></div>
<div id="uname">xyz </div>
</div>
css code :
#changeBackPicture
{
float:right;
margin-top:-70px;
margin-right:500px;
width:270px;
height:35px;
margin-left:-3px;
margin-right:-3px;
}
Below picture shows how the division now displaying. I need to display the division over the image...
Please anyone tell me how to do this stuff........ Thanks. ...
z-index is a CSS property that sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order.
In order for the element to use z-index, it must have be positioned absolute, relative, or fixed.
#changeBackPicture { position: relative; z-index: 9999;}
resource: http://www.w3schools.com/cssref/pr_pos_z-index.asp
It really isn't all that complicated, you should have a look at the Z Index CSS Property as that does exactly what you require.
Make sure you set the Z index for both the image you are trying to cover and the div you are covering it with!
have you tried adding a z-index to your overlay div?
give it a z-index of 50 and see if that works.
You can also give it absolute positioning and just place it ontop of the image div.
Using this really simple html / css (http://jsfiddle.net/XXzTj/)
<div style="background-color:red;">
<div style="margin:12px; background:blue;">hello</div>
</div>
The margin is spaced 12px all round correctly, but I was expecting the red background of the parent element to be shown in the top and bottom 12px spaces, instead its just 'blank space'.
Am I going mad or have I done something wrong?
try this --
<div style="background-color:red;height:auto;overflow:hidden;">
<div style="margin:12px; background:blue;">hello</div>
</div>
http://jsfiddle.net/XXzTj/1/
The child div is forcing the parent div to be rendered offset from its surroundings because you are using the margin property. Since the parent div has no content the browser has no reason to apply styling above or below the child div.
In order to honour the margin properties of the child div, however, which does have content, the parent div is rendered with its background either side of the content.
To have the browser render it in the way I imagine you expect, you would need to apply the padding style. Again, that's because the parent div has no content. Padding forces its styles to be rendered within the area because padding essentially acts like space that content would fill up.
It's collapsing margins in action. Either use padding for parent element instead of margin for child one, or create new context by setting position: relative, overflow: auto/scroll/hidden, or add generated content (:before and :after pseudoelements) with display: block to parent element to prevent margin collapsing.
Not too sure why that isnt working to be honest but this does work:
<div style="background-color:red; padding:12px;">
<div style="background:blue;">hello</div>
</div>
If I have this:
<div id='parent'>
<p>Parent stuff here</p>
<div id='child'>Child stuff here</div>
</div>
Is there a way to make the parent div appear overtop of the child div without using position:absolute? Basically, you wouldn't see the child div at all. z-index doesn't seem to work. I want to do this with a transparent PNG so that I can highlight certain divs on mouseover - the transparentness will allow the under stuff to still be seen a little.
Thanks!
z-index will only work if a position other than static (the default) is set on that element. Add position: relative; to the relevant element and z-index will work. Here is an example: http://jsfiddle.net/sl1dr/8gR6V/