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>
Related
I am aware that you can set the width of a linear gradient using
.grey-block { background: linear-gradient(to right, #f9f9f9 0%, #f9f9f9 35%, white 35%, white 100%); }
As well as the height
.grey-block { background: linear-gradient(to bottom, #f9f9f9 0%, #f9f9f9 65%, white 65%, white 100%); }
However, is there a way you can set BOTH the height and the width using a the same css line?
To clarify, the code in the question is not setting the height and width of the gradient. It's adjusting the color stops, which results in a grey rectangle.
In order to adjust the actual dimensions of the gradient, we need to use the background-size property (as well as background-repeat) to set the height and width of the gradient.
With background-size in control of the gradient's dimensions, we can rewrite the CSS to be as follows:
.grey-block {
background-color: white;
background-image: linear-gradient(#f9f9f9, #f9f9f9);
background-size: 35% 65%;
background-repeat: no-repeat;
}
What's happening is that we're defining a "gradient" of a solid color and confining it's size. The background-repeat is disabled so that it will only render a single grey block.
.grey-block {
background-color: white;
background-image: linear-gradient(#f9f9f9, #f9f9f9);
background-size: 35% 65%;
background-repeat: no-repeat;
}
/* non-relevant styles */
body {
background-color: #222;
}
.grey-block {
height: 200px;
width: 200px;
}
<div class="grey-block"></div>
You can specify an angle. That should do the trick.
.grey-block { background: linear-gradient( 135deg, #f9f9f9 0%, #f9f9f9 65%, white 65%, white 100%); }
I've created the following background pattern:
https://codepen.io/anon/pen/JJvbjz
CSS:
body {
background:
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(to bottom, blue, blue);
background-size: 90px 50px;
background-repeat: repeat-x;
}
I'd like to be able to alternate the colours of the triangles e.g. red, blue, green, red, blue, green, red, blue green etc. etc.
Is this possible?
I have kept your original design as a reference.
In the edited design, I have:
set the background size to twice the original size
changed the way to generate the triangles, this way you only need 2 elements instead of 3.
And added a non-0 position to the 3rd and 4th background images, to make them appear interleaved with the first 2
.test {
width: 100%;
height: 100px;
background:
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(to bottom, blue, blue);
background-size: 90px 50px;
background-repeat: repeat-x;
}
.test2 {
width: 100%;
height: 60px;
background-size: 180px 60px;
background-repeat: repeat-x;
background-image: linear-gradient(120deg, blue 26px, transparent 28px),
linear-gradient(-120deg, blue 26px, transparent 28px),
linear-gradient(120deg, red 26px, transparent 28px),
linear-gradient(-120deg, red 26px, transparent 28px);
background-position: 0px 0px, 0px 0px, 90px 0px, 90px 0px;
}
<div class="test"></div>
<div class="test2"></div>
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');
currently I am not able to blend a PNG Image with a CSS-rendered Gradient.
The Code looks like this:
background: linear-gradient(to right, red , blue), url(img/water.png);
background-blend-mode: overlay;
The Blend Mode is not applied when using a Gradient (and the most recent Chrome Canary Build which does support the background-blend-mode). It is however applied when using a plain Color as background, such as rgb(38, 38, 219) url(img/water.png)
Is this a limitation of the CSS Background-Blend-Mode Specification or am I doing something wrong?
All I want to do is to overlay a PNG over a Gradient, creating an effect that I can't achieve by e.g. having the PNG have lesser opacity or colorizing the PNG to begin with.
it should be fine... maybe try to add the image first, then gradient: background: url(img/water.png), linear-gradient(to right, red , blue);
see the example:
.test {
display: block;
width: 700px;
height: 438px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
-webkit-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
-moz-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
-o-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
linear-gradient(to right, red, blue);
background-blend-mode: overlay;
}
edit: also have a look here: http://css-tricks.com/basics-css-blend-modes/
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