I am not able to set full carousel size height and width for the .carousel-caption? I made this demo. As you can see I have tried this:
.carousel-caption{
background: rgba(44, 44, 23, 0.2);
width:100%;
height:100%;
}
but it is not generating a full width/height caption div!
The carousel-caption has a position absolute. Hence try this.
.carousel-caption{
background-color: rgba(44, 44, 23, 0.2);
bottom: 0;
left: 0;
right: 0;
top: 0;
}
Related
This question already has answers here:
::before and ::after position absolute acting like position fixed
(2 answers)
Closed 3 years ago.
I need to change height of absolute element to 100% of parent.
So what i need to do I tried many type of height with padding and line height
div{
height:300px
}
.arrow {
position: absolute;
/* left: 0; */
height: 100%;
display: flex;
align-items: center;
z-index: 102;
width: 100px;
justify-content: center;background: linear-gradient(to left,
rgba(255, 0, 0, 0), rgba(22, 23, 25, 1));
}
<div>
<div class="arrow"> <img src="/path"/> </div>
</div>
Just set position relative in parents div:
div{
height:300px;
position:relative;
}
.arrow {
position: absolute;
/* left: 0; */
height: 100%;
display: flex;
align-items: center;
z-index: 102;
width: 100px;
justify-content: center;background: linear-gradient(to left,
rgba(255, 0, 0, 0), rgba(22, 23, 25, 1));
}
Absolute elements go up the DOM tree and look for the next Element with a position (relative, or absolute) to position themselves.
So you div needs a position: relative; in order for the .arrow to use it for positioning and sizing.
Is there any way to darken a .png image? I have one as a background image, but it does not cover the whole container, if I set overlay to darken it.
.overlay {
background-color: #322D36 ;
bottom: 0;
left: 0;
opacity: 0.5;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
It's also visible outside of the image space. Is there any way how to darken only image?
demo
You could use the (not super supported) filter property like so.
filter: brightness(0.4);
Some prefixes such as -webkit- may be needed.
Here's a fiddle.
EDIT because of comment:
Make the container the width and height of your image, then add the image using the before pseudo class.
.container {
position: relative;
width: ###;
height: ###;
}
.container:before {
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
position: absolute;
z-index: 1;
background-image: some-url;
-webkit-filter: brightness(0.4);
}
.content {
position: relative;
z-index: 10;
}
Put all your text in the .content div.
You can use a linear-gradient to your background.
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7) ), url("https://lh4.googleusercontent.com/-kDFp715GK_iC4AwrDWQpCR0HfxDMp0WYZATcnlXDhXgf-05OTv3Z9E-P1bL2imdAFAtWg=w1876-h815");
Updated JSFiddle.
Here another JSFiddle in which you can see that only the background will be dark and the rest of elements will be normal.
you can using background-color after background-image property, and using background-blend-mode property for overlay the background-image. Here is the example
https://codepen.io/anon/pen/PQOejG?editors=1100
I need to add a transparent coloured layer over a background image. I tried doing this with rgba but with no result.
What I get now is:
page-heading {
background: rgba(36, 70, 105, 0.74) url("../images/samples/bg3.jpg") no-repeat fixed 50% 0px / cover;
opacity: 0.9;
position: relative;
text-align: center;
padding: 72px 0px;
}
I know that the background color is a fallback for when the image cannot be loaded. How do I add a layer over it in a correct way?
Use a simple box-shadow inset:
.page-heading {
background: url(../images/samples/bg3.jpg) no-repeat fixed 50% 0px / cover;
box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
}
JS Fiddle: http://jsfiddle.net/ghorg12110/q0cLf2s7/
I see that a lot of people here create an extra element or pseudo elements, but you don't need two elements to create this effect. You can simply declare two background-images. One of which is the original image, and the other a linear gradient. See this Fiddle to see the effect working.
background-image: linear-gradient(rgba(36,70,105,.74), rgba(36,70,105,.74)),
url("https://dummyimage.com/1000x1000/3/f.png&text=Background-image");
Note that you first have to declare the gradient and then the image (I always get this wrong the first time I try to make this)
You can do this with a gradient like the fiddle below.
The left is the original image. The right is the one with the gradient applied.
.block {
width: 300px;
height: 300px;
display: inline-block;
}
.og {
background: url(http://placehold.it/300x300);
}
.ed {
background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.2)), url(http://placehold.it/300x300);
}
<div class="block og"></div>
<div class="block ed"></div>
Use a pseudo element...
.page-heading {
background: url("http://lorempixel.com/400/200") no-repeat fixed 50% 0px / cover;
opacity: 0.9;
position: relative;
text-align: center;
padding: 72px 0px;
}
.page-heading:before {
content: "";
background: rgba(36, 70, 105, 0.74);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="page-heading">
</div>
You can use a pseudo-element to place over your . This way you won't use an extra DOM element.
.element {
background: url('http://lorempixel.com/500/500/');
height: 500px;
width: 500px;
position: relative;
}
.element:after {
background: rgba(0,0,0,0.8);
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
JSFiddle here: http://jsfiddle.net/volzy/LLfhm0kc/1/
body{
background-color: #ccc;
margin:0px;
}
.page-heading {
background: rgba(36, 70, 105, 0.74);
opacity: 0.4;
margin: 0;
position: relative;
width:100%;
height:100vh;
text-align: center;
padding: 72px 0px;
}
I use body but the element could be something else
Hi, here a fiddle :
http://jsfiddle.net/5f46znzx/
is what you are looking for?
remember that opacity trasform each element with the opacity set.
i suggest to eliminate it if you dont need that internal element takes opacity.
You need another box above the header. Imagine that's your HTML:
<div class="page-heading">
<div class="page-heading-fake">
</div>
</div>
You can have this CSS
.page-heading {
background: url(yourimg.png);
position: relative; /* neccesary to make an anchor in the fake */
}
.page-heading-fake {
position: absolute;
top: 0;
left: 0;
background-color: rgba(36, 70, 105, 0.74) ;
}
#page-background {
position: fixed;
background-image: url(/images/background-1600.jpg);
display: table;
top:0px;
left:0px;
width: 100%;
height: 100%;
margin-bottom: 0rem;
text-align:center;
background-size: cover;
background-position: 25% 50%;
}
#header {
position:fixed;
margin-bottom: 0rem;
text-align: center;
left:0px;
top:0px;
height: $header-height;
width:100%;
#include background-image(linear-gradient(to top, rgba(0, 8, 39, 0.15) 0%,rgba(0, 8, 39, 0.65) 10%, rgba(0, 8, 39, 0.85) 40%, rgba(0, 8, 39, 0.95) 95%));
z-index: 9999;
}
#footer {
position:fixed;
margin-bottom: 0rem;
text-align: center;
div {
vertical-align: middle;
}
left:0px;
bottom:0px;
height:5rem;
width:100%;
#include background-image(linear-gradient(to bottom, rgba(0, 8, 39, 0.15) 0%,rgba(0, 8, 39, 0.65) 10%, rgba(0, 8, 39, 0.85) 40%, rgba(0, 8, 39, 0.95) 95%));
z-index: 9999;
}
In the HTML the very first thing that is placed is the #page-background and it appears that if instead it is placed elsewhere it no longer takes up the whole page. Is there a way to avoid this? By that I mean, add a background image somewhere deeper in the DOM but which -- via absolute or fixed positioning -- is able to command the entire screen?
The positioning of an element is always relative to its containing block.
If you use position: absolute, the containing block is the padding-edge of the next parent element with position: relative|absolute|fixed.
If you use position: fixed, the containing block is independent of the element's position in the DOM because the containing block is always the viewport.
I created a simple JSFiddle: http://jsfiddle.net/n6s9gx61/1/
I'm trying to add a ribbon to a page using CSS3 linear-gradients, but the rendering in Chrome looks a lot less pleasant than its Firefox or IE alternative. The color stops in Chrome look very pixelated, but using vendor prefixed properties doesn't work as they don't allow specifying a degree.
#extradiv1 {
position: absolute;
top: 0;
right: 0;
width: 121px;
height: 71px;
background: url(../img/ribbon.png);
background: linear-gradient(30deg,
transparent 61px,
rgb(255, 204, 51) 61px,
rgb(255, 204, 51) 76px,
rgb(22, 22, 22) 76px,
rgb(22, 22, 22) 91px,
transparent 91px
);
}
<html>
<body>
<div id="extradiv1"></div>
</body>
</html>
Source code can also be found at http://jsfiddle.net/xyFXx/2/
Is there any way to solve this choppy rendering in Chrome?
This is a rather old question, but I thought I'd chip in in case anyone is still looking for answers.
If you're not concerned about IE older than 9, transform:rotate should yield better-rendered results (transparent angled gradients can indeed get choppy or get gaps at gradient joins).
You could do this with two rotated divs, or with a single div and associated pseudo element. Here's the CSS:
.rotatedDiv {
position: absolute;
-ms-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
}
#extradiv1 {
top: 20px;
right: -30px;
width: 200px;
height: 20px;
background: rgb(255,204,51);
}
#extradiv2 {
position: absolute;
top: 0;
right: -20px;
width: 170px;
height: 20px;
background: rgb(22,22,22);
}
Fiddle: http://jsfiddle.net/brianhewitt1/m4KBC/