how can I set an opacity value, for example opacity: 0.6 on a linear-gradient background-image?
background-image: linear-gradient(to left, #00497a -26.48%,#003366 73.52%);
Thanks!
Replace hexidecimal color-codes with rgba color-codes:
div {
width: 150px;
height: 150px;
background-image: linear-gradient(to left, rgba(0,67,116,0.6) -26.48%, rgba(0,51,102,0.6) 73.52%);
}
<div>
</div>
Use RGBa values:
linear-gradient(to left, rgba(0,73,122,0.6) 26.48%, rgba(0,51,102,0.6) 73.52%);
To set the transparency of the picture itself in the background, without applying color, you can use the background mask property
background-image: url('path/to/your/image.jpg');
-webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 55%);
mask-image: linear-gradient(to bottom, transparent 40%, black 75%);
You can read more here https://www.digitalocean.com/community/tutorials/css-masking-with-mask-image
Try this:
background-image:linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.9)), url('/image/r.jpg');
Related
I'm trying to create a gradient based sunset effect on my website's background.
Example Link (with sunset effect, in the background) https://web.archive.org/web/20161017071941/https://www.embroideryaffair.com/about/
Try to scroll down on the example link & you will notice the "sunset" effect.
This is what I've achieved so far: https://sirsakisan101.provenreviews.com/
I was able to display the two palm images, side-by-side, by using the following code.
body {
background-image: url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/left.png), url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/right.png), url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/sunsetbgbottom.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-attachment: fixed, fixed;
background-position: left top, right top, bottom;
}
Now, I'm trying to use the following code (mentioned below) for achieving the sunset effect on my background images, but it is not working. I've also tried removing the "before" element & adding the background images, along with gradients but then, it is appearing above the background images.
body:before {
background: linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -o-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -moz-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -ms-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#012c57', endColorstr='#ffcb70');
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,203,112)), color-stop(0.3, rgb(107,138,169)), color-stop(1, rgb(205,217,230)) ) !important;
}
I want to display this code behind my background images, to achieve the sunset effect from the example website. I can't understand why it is not working. I will be grateful for any help.
Thank You.
You can do it with another html element inside the background image one.
<div> // has your background image
<div class="gradient"> // will have the gradiant style
</div>
</div>
css
.gradient {
background: linear-gradient( rgba(255,255,255,0.23) 0%, rgba(164,49,34, .85) 100%);
}
Here is an example fiddle
Note i just simplified the gradient css. Keep your own styling.
Consider the way you use the body tag like you currently do. You need to make sure the div inside (with the gradient) spans directly on top of the other div. Maybe you have to do something like
.parent {
// The element with the image
position: relative;
}
.child {
// the element with the gradient
position absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
You can directly add the gradient to the other background-images (since the gradient property is considered a background image) like this:
body {
background-image: url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/left.png),
url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/right.png),
url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/sunsetbgbottom.png),
-webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
}
That worked for me and it's much easier than adding additional elements ;)
What is the syntax for a linear gradient with multiple backgrounds? My code just produces the yellow instead of a graduation from yellow to pink?
background-color: rgba(red,1);
background:
url(/src/stat/chevronRight.svg) 90% 45% no-repeat,
linear-gradient(to bottom, rgba(yellow,1) 0%, rgba(pink,1) 100%);
background-size: 7px;
Many thanks
Martin
You can set color as word yellow or you can use RGB, RGBA or Hexadecimal color values.
div {
height: 100vh;
background: url('http://placehold.it/150x150'), linear-gradient(to bottom, yellow, pink);
background-repeat: no-repeat;
}
<div></div>
How would I create the below image using only CSS?
I'm attempting to draw a line with a transparent gradient at either end - here's what I've tried which does not work:
background-image: -webkit-linear-gradient(left, transparent, #8C8C8C),
-webkit-linear-gradient(right, transparent, #8C8C8C);
So at the left and right end of the line the gradient moves inwards.
You should just use a single gradient like in the below snippet with the start and end as transparent.
Explanation:
transparent 0% means the gradient starts with transparent color
#8C8C8C 15% means that between 0% to 15% the gradient's color gradually changes from transparent to #8C8C8C.
#8C8C8C 85% means that the gradient's color stays as #8C8C8C from 15% to 85%.
transparent 100% means that the gradient's color would again change gradually from #8C8C8C to transparent between 85% - 100%.
The color stops create the illusion as though the gradient is proceeding inwards from either direction. Equal splits make the change look equal on either side.
div {
background-image: -webkit-linear-gradient(left, transparent 0%, #8C8C8C 15%, #8C8C8C 85%, transparent 100%);
background-image: linear-gradient(left, transparent 0%, #8C8C8C 15%, #8C8C8C 85%, transparent 100%);
height: 2px;
}
<div></div>
The various color stop values can help achieve that effect.
Stop the white at 10% and prolong a mix of transparent and gray(increasing) up to 50% and then a mix of gray and transparent(increasing) up to 100%.
.gradient {
width: 600px;
height: 1px;
background: linear-gradient(to right, transparent 10%, gray 50%, transparent 100%);
}
<div class="gradient"></div>
Also, you can play around with the % values to get the exact gradient. For example, your image can be made as accurate as possible by increasing the stop points like below.
.gradient {
width: 600px;
height: 1px;
background: linear-gradient(to right, transparent 10%, gray 20%, gray 90%, transparent 98%, transparent 100%);
}
<div class="gradient"></div>
I've been trying to create a radial background, except for some reason all I can get is a line. I have no idea what I'm doing wrong, any ideas?
Jsfiddle: http://jsfiddle.net/3QSFj/1/
CSS:
background: -webkit-gradient(radial, circle, 0, circle, 70, color-stop(0%, #718aa7), color-stop(70%, #203044));
background: -webkit-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -moz-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: -o-radial-gradient(circle, #718aa7 0%, #203044 70%);
background: radial-gradient(circle, #718aa7 0%, #203044 70%);
Set your body height to 100%, your body element is empty, and thus it doesn't have any height, the background is simply repeated there.. Bad Demo
html, body {
height: 100%;
}
Demo
Also, you background will be repeated, so you will need background-attachment: fixed; as well as background-repeat: no-repeat
Demo 2
I'm trying to make a gradient background for my website, http://www.lathamcity.com
The problem is, as you can see, it just repeats the blue and cyan a bunch of times instead of making a gradient out of them.
To add to the mystery, when two links are clicked on to open a third div, the gradient suddenly changes. The third div extends below the second one, and the distance between them is occupied by the first gradient color and the rest up to the top of the page is just a normal gradient.
Here's the code I'm using for the gradients.
body{
background-color: #1B0D70;
background-image: linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -o-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -moz-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -webkit-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -ms-linear-gradient(bottom, rgb(214,231,232) 49%, rgb(36,155,171) 75%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.49, rgb(214,231,232)),
color-stop(0.75, rgb(36,155,171))
);
}
Currently your body height is 0px because your most of the element are absolute position.
Write this in your css:
html, body{
height:100%;
}