#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/
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.
you can see a pic below (I am really bad at painting, sorry for that). I don't know how to make these (I guess) box-shadows (pink in the picture) only on two corners, but their ending is oblique. Because what I think, those borders (red in the picture) on corners can be made with after and before elements.
What I would do is to make two boxes, one inside the other and add a box shadow. But I stop at that point how to make those oblique endings and how to make those shadows shorter than the whole height or length. Maybe you have any ideas?
this is what i have tries so far:
.div2 {
position: relative;
width: 40px;
height: 40px;
margin: 10px;
}
.div {
position: relative;
width: 60px;
height: 50px;
margin: 20px;
box-shadow: 10px 10px;
}
.div2::before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
left: -10px;
border-top: 1px solid #000;
border-left: 1px solid #000;
}
span::after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
right: -10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
<div class="div">
<div class="div2"><span></span></div>
</div>
about gradient see : https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.
about multiple background https://css-tricks.com/css-basics-using-multiple-backgrounds/
& https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
background-size is also usefull here https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
background-clip comes handy too https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
The background-clip CSS property sets whether an element's background or extends underneath its border.
playing around with background-^properties you could do something like this
.mybox {
width:250px;
height:180px;
padding:20px;
background:
linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
linear-gradient(0deg,rgb(237, 28, 36),rgb(237, 28, 36)),
linear-gradient(0deg, rgb(0, 162, 232), rgb(0, 162, 232)),
linear-gradient(-45deg, rgb(255, 174, 201) 20%, rgb(0, 162, 232) 20%, rgb(0, 162, 232) 80%, rgb(255, 174, 201) 80%) ;
background-clip: border-box, border-box,border-box, border-box, content-box,border-box;
background-repeat:no-repeat;
background-size: 3px 40px, 80px 3px, 3px 40px, 80px 3px,auto auto,auto auto;
background-position: 22px 160px, 22px 200px , 260px 15px , 180px 15px ,center, center;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:3rem;
box-shadow: 20px 20px 10px purple
}
<div class="mybox"> My Box</div>
Here is my idea using multiple background and border-image
.box {
width:150px;
height:100px;
border:15px solid transparent;
border-image:linear-gradient(-45deg,pink 20%,transparent 20%,transparent 80%,pink 80%) 15;
background:
linear-gradient(red,red) top right,
linear-gradient(red,red) top right,
linear-gradient(red,red) bottom left,
linear-gradient(red,red) bottom left,
#00a2e8;
background-size:2px 40px,40px 2px;
background-origin:padding-box;
background-repeat:no-repeat;
}
<div class="box"></div>
Here is another idea using less gradient:
.box {
width:150px;
height:100px;
border:15px solid transparent;
border-image:linear-gradient(-45deg,pink 20%,transparent 20%,transparent 80%,pink 80%) 15;
background:#00a2e8;
position:relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:2px solid transparent;
border-image:linear-gradient(30deg,red 20%,transparent 20%,transparent 80%,red 80%) 1;
}
<div class="box"></div>
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;
}
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) ;
}
Is it possible to make only part of div transparent like an amount of space in div.
For example, you select 100px from top of div and the top 100px have an opacity set?
How would I do it?
You can do a couple of things:
Try a background image where half is transparent and the other half is not.
Use a CSS gradient in such a way that half is transparent and the other is not. Ex:
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(41,137,216,0) 50%, rgba(34,125,203,1) 52%, rgba(125,185,232,1) 100%); /* FF3.6+ */
Use multiple divs where one has transparent BG and the other does not. Ex:
<div>
<div id="transparent" style="background: transparent"></div>
<div id="not-transparent" style="background: #000"></div>
</div>
I'm sure there are other ways, but those are the first three that come to mind.
Good luck.
Either you create the right background-image using a semi-transparent PNG (transparent at top, opaque at bottom for example) ; either you use two sub-divs, each having its own background-color (one of which with rgba for the transparent part).
You can use css3 properties along with pseudo elements to create this effect:
The trick is to draw a box with :before or :after pseudo element. We can apply background property for inner semi-transparent background. While for outer background we can use a large box-shadow value.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
html,
body {
height: 100%;
}
body {
background: linear-gradient(to top, #ff5a00 0, #ffae00 100%);
margin: 0;
}
.box {
position: relative;
margin: 30px 20px;
overflow: hidden;
height: 120px;
width: 250px;
}
.box:before {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 1000px #000;
position: absolute;
height: 50px;
width: 50px;
content: '';
left: 0;
top: 0;
}
<div class="box"></div>