I am trying to put a bottom bar to the bottom of the screen. I have piece of CSS code which creates the bar for me. But I haven't be able to fix the bar to the bottom.
CSS
.top_bar
{
display:block;
height:18px;
margin-bottom:10px;
margin-top:10px;
background-image: linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -o-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -moz-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -webkit-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -ms-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -webkit-gradient(
linear,
left bottom,
right 0,
color-stop(0.15, rgb(135,30,51)),
color-stop(0.58, rgb(90,115,183)),
color-stop(0.79, rgb(90,116,183))
);
}
How can I fix this to the bottom?
I have tried this code below but I didn't work. It fixes the bar to the bottom but gradient bar shrinks...
position: fixed;
bottom: 30px;
Just add these 3 to your rule, fixed positioning needs the element's width to be mentioned, because it is just a specialized form of absolute positioning:
position: fixed;
width: 100%;
bottom: 30px;
Fiddle
If the element is positioned using absolute or fixed, the element's width won't automatically grow to 100% the way it does otherwise. If you want the width to be 100%, you need to set that manually.
Code:
.top_bar {
position: fixed;
bottom: 30px;
display:block;
height:18px;
width: 100%; //Manually set width to 100%
margin-bottom:10px;
margin-top:10px;
//Gradient stuff
}
Example: http://codepen.io/skimberk1/pen/4eca8e6d6f9b899458cfa4ccfea38877
http://jsfiddle.net/Y7UKv/1/
When the position type is changed it no longer has a width of 100%. You'll need to add
left: 0;
right: 0;
or
width:100%;
Related
This question already has answers here:
CSS: Z-index of multiple backgrounds
(3 answers)
Closed 7 months ago.
I'm doing CSS, but I have no idea how to use the z-index function. Here is what I have so far:
body {
background-image: url("design1.jpg"), url("northpole2.jpg"), url("chessbackground.jpg"), url("clipart3102234.png"), url("grassblock.jpg"), url("photoborder.jpg"), url("website\ background\ color.jpg");
z-index: 1, 1, 1, 2, 1, 1;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 700px 290px, 700px 290px, 250px 250px, 200px 200px, 250px 250px,850px 300px, 200px 200px;
background-position-x: 0%, 100%, 0%, 98%, 100%, 50%, 50%;
background-position-y: 0%, 0%, 24%, 24%, 24%, 24%, 24%;
background-color: rgb(170, 154, 154);
}
I'm doing this so I can layer some of the images inside of the background. Help with this would be greatly appreciated. Edit: I have made some changes to the code but it still won't work:
body {
background-image: url("design1.jpg"), url("northpole2.jpg"), url("chessbackground.jpg"), url("clipart3102234.png"), url("grassblock.jpg"), url("photoborder.jpg"), url("website\ background\ color.jpg");
z-index: 1, 1, 1, 2, 1, 1, 2;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 700px 290px, 700px 290px, 250px 250px, 200px 200px, 250px 250px,850px 300px, 10px 10px;
background-position-x: 0%, 100%, 0%, 98%, 100%, 50%, 50%;
background-position-y: 0%, 0%, 24%, 24%, 24%, 24%, 24%;
background-color: rgb(170, 154, 154);
}
Edit: I have found the solution for this issue, it is to declare the one you want top most as the first closest to the background-image function like this:
body {
background-image: url("paperbackground.jpg"), url("design1.jpg"), url("northpole2.jpg"), url("chessbackground.jpg"), url("clipart3102234.png"), url("grassblock.jpg"), url("photoborder.jpg");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 650px 200px, 700px 290px, 700px 290px, 250px 250px, 200px 200px, 250px 250px, 835px 365px;
background-position-x: 50%, 0%, 100%, 0%, 98%, 100%, 50%, 50%;
background-position-y: 30%, 0%, 0%, 24%, 24%, 24%, 24%, 24%;
background-color: rgb(170, 154, 154);
}
There is no z-index for background images as z-index is element based.
For more info :-
CSS: Z-index of multiple backgrounds
You cant use z-index like this..Z-index helps to move elements or layers from front to back back to front or anyhow order you want.and also i think it's not possible to use z-index for background.how ever please try with different values.don't use same values..bigger z-index value means it comes front!
I'm struggling to find a nice way to fade a vertical gradient at its left and right sides. Basically a top-bottom gradient with the left-right ends faded to 0% opacity.
I need it to be a Transparent fade out so that it can be on top of images/videos.
Here is a quick visual of what I am aiming for:
Any suggestions?
Pretty Simple, You just need to add transparent in a linear gradient.
div {
background:linear-gradient(to right, transparent, #00F5CB, transparent);
width: 100%;
height:64px;
}
<div></div>
Use multiple backgrounds. The first one is on top.
div {
width: 100%;
height: 100px;
background-image: linear-gradient( to right, white 0%, transparent 30%, transparent 70%, white 100%),
linear-gradient( to bottom, Lightgreen, Aquamarine);
}
<div></div>
You can try multiple background like this:
.box {
width: 500px;
height: 80px;
margin:auto;
background:
radial-gradient(ellipse at top, #7ff5b0 20%, transparent 70%) top center/80% 100%,
linear-gradient( to right, transparent 0%, #19d9ef 30%, #19d9ef 70%, transparent 100%);
background-repeat:no-repeat;
color: ;
color: ;
}
body {
background:pink
}
<div class="box"></div>
I have two divs on top of each other. I need the bottom div to have a slanted angle like this:
I only need help with slant of the top of the blue div, I can handle to bottom slant myself.
I could create a psuedo element and skew it, but the issue is that the blue div has a gradient and making a psuedo element with the same gradient makes the two elements not flow together with their gradients.
I think my only solution is to create a transparent div, skew it and place it on top of the blue div. I was wondering if this is even possible to create a skewed transparent div and have it cut into the blue div, slanting the blue div while showing the image in the background.
I'm open to any other ideas to achieve this slanted div.
Ive created a simple jsfiddle with the divs for anyone to mess around with.
Here is the basic mark up:
<div class="main">
<div class="main-top">
</div>
<div class="main-bottom">
</div>
</div>
.main-top {
background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
background-size: cover;
height: 300px;
width: 600px;
}
.main-bottom {
height: 300px;
width: 600px;
background-image: -moz-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
background-image: -webkit-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
position: relative;
top: -150px;
}
Thanks
It is in fact very easy if you use this site
http://bennettfeely.com/clippy/
.main-top {
background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
background-size: cover;
height: 300px;
width: 600px;
}
.main-bottom {
height: 300px;
width: 600px;
background-image: -moz-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
background-image: -webkit-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
position: relative;
top: -150px;
-webkit-clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
}
<div class="main">
<div class="main-top">
</div>
<div class="main-bottom">
</div>
</div>
I've got this working using a static black background on my games splash screen:
[
If too small: http://i.imgur.com/VzLViDB.png
As you can see it works on a black background, but when we are on any other background, we simply see black instead of the actual background.
This makes sense, because I'm using a gradient like:
#waves::before {
left:0;
background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}
#waves::after {
right:0;
background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}
Soo... technically it's working as intended. I just can't figure out how to do it like I want it to work.
My goal: fade out the div so that the waveform corners appear to fade out.
How i attempted it: waves is a div, so I leveraged before and after psuedo-elements, and gave it a width LARGER than required (so there is some overlap), and then used a gradient to fade.
If anyone knows how to do this, that would be great!
I did search, which is where I got the idea of a gradient from. I couldn't find anything that would suit this use case (multiple backgrounds)
To clarify, this is my goal:
Since your image is mostly black, You can use a mix mode to overlay it over the background.
And keep the way you mask it with black on the sides
.bkg {
width: 100%;
height: 300px;
background-image: url(http://lorempixel.com/400/200);
background-size: cover;
}
.overlay {
width: 100%;
height: 100px;
position: absolute;
top: 200px;
background-image: linear-gradient(to right, black, transparent), linear-gradient(to left, black, transparent), url(https://i.stack.imgur.com/hhk0G.png);
background-size: 20% 100%, 20% 100%, cover;
background-position: left center, right center, center center;
background-repeat: no-repeat;
mix-blend-mode: screen;
}
<div class="bkg"></div>
<div class="overlay"></div>
I have fixed a similar problems with diagonal gradient.
Now it's difficult with linear.
I was able to create a gradiet with a cross
background: linear-gradient(to right, transparent 40%,#f00 50%,transparent 60%),
linear-gradient(to bottom, #fff 20%,#f00 50%,#fff 80%);
I can't create a gradient that have in the left half a gradient to bottom WHITE-RED and in the right half an inverse gradient RED-WHITE.
The below is the way I had tried to create it:
background: linear-gradient(to bottom, transparent 50%,#ff0 100%),
linear-gradient(to right, transparent 50%,#f00 100%);
But the yellow part is full! How can I fix this situation?
This is what I want:
It is very much possible to achieve this using a single element and a single background rule. Just give each of the gradients 50% size of the container in the X-axis, position one gradient on the left side and the other on right side using background-position and stop the gradient from repeating by setting the value for background-repeat as no-repeat.
div {
height: 100px;
background: linear-gradient(to top, red 10%, yellow 50%), linear-gradient(to bottom, red 10%, yellow 50%);
/* background-size: 50% 100%; Ideally this should be enough but it leaves a white line in the middle in snippet for some reason and so use below setting */
background-size: 50% 100%, calc(50% + 1px) 100%;
background-position: 0% 0%, 100% 0%;
background-repeat: no-repeat;
}
<div></div>
Edit: It is possible with one background, see Harry's answer.
It's not directly possible with a single background rule on your element, but you can utilize the ::before and ::after pseudo elements.
div {
width: 100%;
height: 50px;
border: 1px solid black;
position: relative;
background: linear-gradient(to bottom, red 0%, #ff0 100%);
}
div::before {
content: "";
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to top, red 0%, #ff0 100%);
}
<div></div>