I want to add text over an image using css. I am using bootstrap. I have not to use background image.
<div id="myCarousal" class="carousal slide">
<div class="carousal-inner">
<div class="item active">
<img src="img/cr1.jpg">
<div class="container active">
<div class="carousal-caption">
<h1> Quiz </h1>
<p> Want to be part of it..</p>
<p> Sign Up Today</p>
</div>
</div>
</div>
</div>
</div>
The CSS is as follows..
.carousel-caption{
z-index:10;
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.carousel-inner > .item > img{
position: relative;
top: 50px;
/*left: 0;*/
min-width: 100%;
height: auto;
}
.carousel-inner > .item{
height: 500px;
}
Please help me to fix it.
Try adding z-indexes for each element. Just in case, we're adding a z-index for everything inside .carousel-caption just to avoid any chance you have some z-index somewhere
.carousel-inner .item img{
position: relative;
top: 50px;
/*left: 0;*/
min-width: 100%;
height: auto;
z-index:0;
}
.carousel-caption{
z-index:1;
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.carousel-caption *{
z-index:1000;
position: relative;
}
Related
I am trying to design a footer for my website like this:
but I've got this result, causing a horizontal scroll (red background is for better showing the problem)
.footer-container {
background-color: white;
width: 100%;
position: relative;
}
.rotate-container {
position: relative;
width: 100%;
}
.rotate-white {
position: absolute;
left: 100px;
top: -40px;
width: calc(100%);
height: 200px;
transform: rotate(-4deg);
background-color: red;
z-index: -1;
}
.rotate-grey {
top: -40px;
right: 100px;
position: absolute;
width: calc(100%);
height: 200px;
transform: rotate(5deg);
background-color: #e5e5e5;
z-index: -2;
}
.footer-top-img {
width: 290px;
position: absolute;
left: 20%;
right: auto;
top: -140px;
z-index: 1;
}
<footer style="margin-top: 150px;">
<div class="footer-container px-xl-5 w-100">
<div class="rotate-container">
<div class="rotate-white"></div>
<div class="rotate-grey"></div>
</div>
<img class="footer-top-img d-xl-block d-none" src="../global/imgs/footer/footertop.png" />
<div class="container-fluid footer-content px-xl-5">
. . .
</div>
</div>
<footer/>
How can I remove the overflow of the red div to prevent the page from scrolling?
Therefor, you need to hide the oferflow of the body itself with
body {
overflow-y: hidden;
}
bgpattern, illustratewoman class images should be hidden outside the div but the image is visible outside the card div also. For me, the images only should be displayed inside the div but not outside. Box class image should display on the inner and outer side of the div.
CSS even though I tried overflow: hidden for card class but it hides all the images going outside but for me, box image should not be hidden I tried to add for bgpatternimg, illustratewoman it doesn't work.
card {
position: absolute;
background-color: white;
height: 70vh;
width: 130vh;
border-radius: 3%;
position: relative;
margin: auto;
top: 15vh;
}
.bgpatternimg {
overflow: hidden;
position: absolute;
left: -70vh;
top: -30vh;
width: 120vh;
}
.illustratewoman {
overflow: hidden;
position: absolute;
bottom: 10vh;
left: -10vh;
width: 60vh;
height: 50vh;
}
.boximg {
position: absolute;
width: 22vh;
bottom: 4vh;
left: vh;
overflow: visible;
}
<div class="card">
<div class="left">
<div class="bgpattern">
<img class="bgpatternimg" src="images/bg-pattern-desktop.svg" alt="bgpattern">
</div>
<div class="illustratewoman">
<img class="illuswoman" src="images/illustration-woman-online-desktop.svg" alt="illustratewoman">
</div>
<div class="box">
<img class="boximg" src="images/illustration-box-desktop.svg" alt="">
</div>
</div>
you're positioning absolute which means it'll make the position relative to the nearest static/relative positioned parent or grandparent. you're better off using another strategy without absolute positioning, then make your widths and heights 100%
change style file
hello you should change the style to this code
.card{
position:absolute;
background-color: white;
height:70vh;
width:130vh;
border-radius: 3%;
position:relative;
margin:auto;
top:15vh;
}
.bgpattern {
overflow: hidden;
position: absolute;
left: -70vh;
top: -30vh;
width: 120vh;
}
.illustratewoman {
width: 60vh;
position: absolute;
bottom: 10vh;
left: -10vh;
overflow: hidden;
}
.box {
position: absolute;
width: 22vh;
bottom: 4vh;
left: 28vh;
}
I've tried for some hours and this is getting on my nerves. I'm working with bootstrap and the spin.js library. I'm trying to put a color layer over an img tag, but this simply doesn't works.
The code which I'm working on is this
The CSS code
.container-fluid {
position: relative;
padding: 0;
margin: 0;
}
.header{
position: relative;
max-height: 920px;
height: 100%;
}
.header_layer{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background-color: darkgrey;
z-index: 100;
}
.img_header{
position: relative;
top: 0px;
left: 0px;
width: 100%;
z-index: 99;
}
The HTML code:
<div class="container-fluid">
<div class="header col-md-12">
<div class="header_layer"></div>
<img src="http://placehold.it/350x150" class="img-responsive img_header">
</div>
</div>
However, thanks a lot.
As you give position:relative, and top/left : 0 so the elements do not overlap I guess you need position:absolute
I'm trying to create some static content using a div with position: fixed and then allow a solid div with a background-color to scroll over it and hide the static text below.
HTML:
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
CSS:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
But the yellow div just shows the text through from the fixed background.
Why is this?
By setting z-index: -1; in .static-background i get the desired behaviour, except that the link is no longer clickable and the text is not selectable.
How do I make the background of .overlay hide the fixed elements behind while still allowing interaction (until hidden)?
Fiddle here.
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
When you give the element .static-background a negative z-index, it is being placed behind the parent .container element, which is why the element is unclickable.
To work arond this, you need to give the parent element, .container, a z-index to establish a stacking context between the elements.
In this case, you can simply give it a z-index of 1.
Updated Example
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1; /* Added */
}
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.static-background {
position: fixed;
z-index: -1;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Some text</p>
<p>this should be clickable</p>
</div>
<div class="overlay"></div>
</div>
As an alternative, you could also just give the element .overlay a z-index of 1, and remove the z-indexs from the other elements. (example)
You might want to add some z-index to your elements:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index: 99;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
position: relative;
z-index: 100;
}
Change your css to this...
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index:4;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
z-index:5;
position:relative;
}
Working JSFiddle http://jsfiddle.net/DivakarDass/mcdbopj6/3/
My HTML:
<div id="why">
<div class="gallery clearfix">
<img src="images/why-bg.png" class="background-why">
<div class="gallery-inner">
...
</div>
<div class="gallery-inner">
...
</div>
<div class="gallery-inner">
...
</div>
</div>
</div>
MY CSS:
#why{
height: 100%;
}
#why .gallery{
height: 100%;
width: 100%;
position: relative;
}
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
}
I want the .background-why to come over the .gallery. But it stay under the .gallery with my code. I think this image will help you to understand what I am expecting
Use the z-index property for your .background-why class.
Your css should look like this:
#why{
height: 100%;
}
#why .gallery{
height: 100%;
width: 100%;
position: relative;
}
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
z-index: 1;
}
Z-index is your answer. Set the z-index of the top element higher than your background ones
#why{
height: 100%;
}
#why .gallery{
height: 100%;
width: 100%;
position: relative;
z-index:1;
}
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
z-index:2;
}
Use z-index:
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
z-index:1
}
Depending on your needs:
1) If you wish that .background-why to be permanently over the .gallery-inner (that whole area is .gallery-inner) - jsfiddle.net/bw6ecbuy/1/
2) If you want the .background-why to come over the .gallery-inner on hover than: jsfiddle.net/a8yszLsf/2/
Leave a comment if I got this wrong.