I have a fullscreen Bootstrap container that's sitting in front of a color overlay I added. But it seems that the container blocks the overlay even though it is mostly empty, why is that so? I need it behind my container as the img inside the container needs to be on top of the color. The html's body's color is coming through, though. But I need both the html's body color and also the overlay to be seperate as I'm slowly fading the overlay out to show the body color... Wondering if it sounds confusing. =x Thanks in advance!
<div class="container-fluid">
<div class="row row-xs-center">
<div class="col-xs-12 text-xs-center">
<img src="../img/cover_coral.png" id="myCover">
</div>
</div>
</div>
<div id="myOverlay"></div>
Using Bootstrap's container-fluid class will cause your div tag to span the width of the page (with a bit of padding applied). If you have an overlay you want to show in front of it, your best option is to use CSS to add a z-index of say 2000 (any large number will do). When you fade out, simply animate the opacity of the overlay and/or change the z-index so it's behind the container.
Related
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?
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 am using WordPress and I want to make the header and the div below it to share the same background image.
I have added the div in the WordPress page using Visual Composer and given it a background image, but the only way I can make it go into the background of the nav is by giving it a negative margin-top value, which of course makes it non responsive. Could anyone give me any pointers?
Since you dont have any code, i cant really SEE what you want to do but, i assume what you need to do is something like this
<div id="mainTOPwrapper">
<div id="header">header content here</div>
<div id= "divBelowIt"> lolz at the div name =) </div>
</div>
And then, you give the background image css to "mainTOPwrapper". Make sure the divs within it dont have any backgrounds, and this will work for you
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
I've been racking my brains for quite a bit of time but still was not find to find a variant but one I will describe here.
I’m using twitter bootstrap 2.3.2. I wanted to change the background of the "container". When I applied the changes, this image was also the background of "navbar" and "hero-unit".
The same thing you can discover here:
http://getbootstrap.com/2.3.2/examples/hero.html
By setting in the "Inspect Element" of the "container" settings smth like this:
background-image: ('url');
It will not only set the image of the body, but also of the "navbar".
Surely, I clearly understand why, in my case, the background of "navbar" and "hero-unit" are changing, because I got this in the HTML:
<div class="container">
<div class="navbar">
<div class="hero-unit">
</div>
</div>
</div>
But what I need, is that the "hero-unit" and the main content "container" were on one line (as on the link provided above). If they are applied to the "container" class it works, but the background is fairly. What properties do I have to apply to the new class, so as they are of equal size (see the link). I think I'm stuck a bit and badly need some support.
I guess I gotta create two new classes? One for the equal display of the "container" and "hero-unit" and "navbar" and the other (with same property of width) to set the background. But I cant figure it out:(
There's an easy fix for your issue.
Use proper markup. It makes no sense to put a hero-unit inside of a navbar and after that put said navbar inside of your container.
<div class="navbar">
<!-- Other stuff -->
</div>
<div class="container">
<div class="hero-unit"></div>
</div>
This is the markup you should use. Then you can create a separate class with your CSS properties and add that class to your DIV with the container class.