My task is to create website x, with a given background image. In addition, there is a div that lives on the side of the website, and when hovered over it animates the movement of another div from the right side of the screen.
The problem is that I would like to have the background blur in the area under the div.
After some research and brainstorming I have come up with the following method of doing that:
I have my background draw on the body element. Then, I have a div that moves when another parent div is hovered over. Next, within that div I have another div which has a set width and is meant to act as a cropping mechanism over the last child, which is the same background but with a filter: blur(10px) property.
Here is what that would look like:
<div class="draws-background">
<div class="moves-child-when-hovered">
<div class="overflow-hidden-to-crop-child">
<div class="draws-blurred-background-with-fixed-position" />
</div>
<div class="some-content-that-needs-to-be-moved" />
</div>
</div>
Note the following:
The div which acts as a crop HAS to move with the content, so that the underside can look blurred.
I did get this to work 90% of the way; the blurred background works.
The problem with the code is that the blurred background moves alongside everything else, so the effect actually seems more like a section of a blurred background moving, not a div scrolling over a blurred background.
I am trying to achieve an effect similar to that of the notification bar in MacOS.
Am I approaching this problem wrong or is there some way to stop the blurred background from moving with its parent?
Related
I've been trying to place some bootstrap/html/css on top of CSS animated starfield as a background.
One way that seems to stick out online is to make a 1x1 pixel png. I'm hoping there is a way to code in transparency instead.
background: rgba - to play with alpha doesn't work.
opacity:0 also doesn't work.
z-index:-1 with the above also doesn't work.
I've been fiddling with it for a while. Here is the codepen.
http://s.codepen.io/awaybackhome/debug/QdqNNX
Ideally, I'd like to see the stars coming through the Div that contains text, the Div(column) left of the quote box, and the Div that contains the buttons. Instead, I'm just getting the black background.
In my experience this is fairly simple code, but a bit twisted initially. Start with a <div> for the background. Give it an id or class relating to position on top of the Star Field background. Now, in your CSS reference the new <div> by setting background-color: transparent;. This makes it effectively an invisible layer you can output on top of. Next, put your stuff inside the new <div> layer. HTML should look similar to this:
<div id="starFieldBackground">
<div id="background">
<p>Your Code Here</p>
</div>
</div>
And your CSS:
#background {
background-color:transparent;
}
Be sure to set the width and height of <div id="background">.
This could also be accomplished with z-index positioning with a bit more code.
Edit:
reference to background-color properties.
http://www.w3schools.com/cssref/pr_background-color.asp
I have two divs. I would like to position one div over the other and have it appear over it. I am able to position the div but how can I make it such that background of the div is not visible or should I control the background visibility.
....
...
You should use background color and you can do one more thing that is while showing the upper div reduce the opacity of below div or just hide it or you can make overlay on which put the upper div so background div will not be visible. So many ways are already present to do such thing it depends upon you need.
I've used a technique here with jQuery, HTML and so on. If I select an element its background will be a sliding lines animated gif so if I put another div in front of it and i made the back div 1 pixel wider than the front then it will look like the selection effect on photoshop. The problem is that sometimes I want an element to be opaque (for example text elements should not have background color, I want other elements to have that feature). Thus if I set the front div to opaque which have the text I will see the sliding lines gif itself. Is there a way to overpass the background div's background image on that area where the front div is visible and I could see everything BEHIND the back div?
I am just starting out making my first website.
What I am trying to do is put a chart over top of a picture. I have a tiled background image, and then I have another large image onto of the background. I want a chart to be put on top of the large image. In my CSS panel I have set the placement to where I want the chart to be (on top of the image), but when I change the position to "absolute" the chart just disappears. I think it might be behind my other picture? When I change the position to "relative" it goes where I want it to be, but of course I don't want it relative (moving with the window) I want it to be in the same place when the window changes.
I'm hoping there is a quick fix for this that I'm not aware of.
For absolute to work the element must be inside an element with its position set to relative, fixed, or absolute.
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute;top:100px;left:100px">
blah
</div>
</div>
edited to remove link. Just google "position absolute values"
I'm currently working on this layout
http://imstillreallybored.com/gridiron/indexx.html
at the top menu i have to different backgrounds for the menu the red one and the gray gradient. I need the gray gradient to continue on the right side of the menu off of the page i cant seem to get this to work. I tried absolute positioning but when you resize the browser it covers the menu which wont work. I cant seem to think of the right way to do this anyone have any ideas?
You can create a very long background image for your #menuContainer that is half red and half grey, and then center position it, so it will always stay red on the left and grey on the right. It might be a hacky solution, but that is the easiest thing you can do without changing your markup.
try nesting a few divs. run the grey gradient all the way across, then put your red image over that in another div, and left align it. make the red image like 500px wide and it'll always be on the left, but will extend under the menu and be hidden.
<div style="background-image:url('grey-gradient.jpg'); background-repeat:repeat-x;">
<div style="background-image:url('red.jpg'); background-repeat:no-repeat;">
<div>
<ul>menu</ul>
</div>
</div>
</div>