I'm adding a gradient on top of a background-imagewith a single property:
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5)), url('/image-1.jpg');
All my elements with class .gradient have the gradient, but the image changes for each element so I wanted to know if I could set the gradient as a property of .gradient and then change the image url in each element.
<div class="gradient image-1"></div>
<div class="gradient image-2"></div>
<div class="gradient image-3"></div>
Something like this:
.gradient // Add the gradient just once
{
background-color: background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5);
}
.image-1 // Change the image for each element
{
background-image: url('/image-1.jpg');
}
.image-2
{
background-image: url('/image-2.jpg');
}
There is no way you can define and override only one of the multiple background layer, so you need to re declare for each..
Demo
div {
height: 100px;
width: 100px;
background: #eee;
margin: 20px;
background: url('http://www.google.com/images/icons/product/chrome-48.png'), linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}
div:nth-of-type(2) {
background: url('http://www.digitalkonline.com/Portals/86261/images/agree-icon.png'), linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%)
}
The other way to achieve this is to have background on the parent element, and another background on the child element, so a nesting trick
Demo 2
div.wrap {
height: 100px;
width: 100px;
background: #eee;
margin: 20px;
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}
div.wrap div {
height: 100%;
width: 100%;
}
div.hold > div.wrap:nth-of-type(1) > div {
background: url('http://www.digitalkonline.com/Portals/86261/images/agree-icon.png');
}
div.hold > div.wrap:nth-of-type(2) > div {
background: url('https://www.google.com/images/icons/product/chrome-48.png');
}
I am not sure if it will work with gradient.
However when we want to add 2 images I use background-size:contain;
background-image: URL("../images/imageName1.png"), URL("../images/Icone/imageName2.png");
background-size:contain;
background-repeat: repeat-x, no-repeat;
The first repeat will be for the first image and so on.
Related
body {
height:100%;
background: linear-gradient(top, #d808a4 50%, black 50%);
background: linear-gradient(top, #d808a4 50%,black 50%);
background: linear-gradient(to bottom, #d808a4 50%,black 50%);
height: 229vh;
}
I want to horizontally split the background into two colors where one is black color. And I want the other one to be a gradient that goes from pink to purple, I have manage to split into purple and black, but i want a purple pink grandient, can someone help me?
#top-half {
position: absolute;
left: 0;
width: 100%;
height: 50%;
background-color: black;
}
#bottom-half {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 50%;
background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%);
}
<div id="bottom-half"></div>
<div id="top-half"></div>
2 divs for each half
position: absolute and left: 0 and top: 50% sets the position
width: 100% sets it to screen width
height: 50% sets the height for each one to half the screen width
background-color: black obviously sets the background color to black, and background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%) sets the background to a gradient (you can generate nice CSS gradients at https://cssgradient.io/ )
You cannot have multiple background, the newer one will overwrite the old ones. What you can do is to have multiple gradients in a single background such as (try scrolling):
body {
height: 200vh;
background:
linear-gradient(to bottom, transparent 50%, black 50%),
linear-gradient(100deg, #8a07ff, #f500d7);
}
You can do this with just one background setting.
This snippet separates out each of the CSS background settings to make it clearer what is going on.
The whole element gets a black background, then a background-image which is a linear-gradient is defined. This will sit on top of the black background-color. It is given a size and a position and is made not to repeat.
Obviously change the colors and the size to what you want.
.bg {
width: 100vw;
height: 100vh;
background-color: black;
background-image: linear-gradient(to right, purple, magenta);
background-size: 80% 50%;
background-position: center top;
background-repeat: no-repeat;
}
<div class="bg"></div>
Does anyone have an idea how to fill the middle with the same color as the background image?
#first-illustration {
padding-top: 15%;
padding-bottom: 10%;
background:url("../images/bg-section-top-desktop-1.svg") top, url("../images/bg-section-bottom-desktop-1.svg") bottom;
background-repeat: no-repeat;
background-size: contain;
}
This is how it appears
You could add a background gradient with hard transitions:
background: linear-gradient(0deg, transparent 0%, transparent 15%, #f6fbff 15%, #f6fbff 90%, transparent 90%), url(..), url(..);
But that won't be responsive out of the box, involves tweaking and possibly media queries.
A better way IMHO is to move the background images to the before and after pseudo elements, and set their aspect-ratio to that of the images:
.illustration {
background: #f6fbff;
/* ... */
}
.illustration::before, .illustration::after {
display: block;
content: '';
background: no-repeat 0 0 / cover;
}
.illustration::before {
background-image: url("../images/bg-section-top-desktop-1.svg");
aspect-ratio: 10 / 1;
}
.illustration::after {
background-image: url("../images/bg-section-bottom-desktop-1.svg");
aspect-ratio: 12 / 2;
}
I've been trying to make that in CSS to my webpage:
But the only thing I get is a repeated gradient over all page:
This is the code I'm using:
body {
background: #body-color;
background: -webkit-linear-gradient(#999cdb, #f6bdbd);
background: -moz-linear-gradient(#999cdb, #f6bdbd);
background: -o-linear-gradient(#999cdb, #f6bdbd);
background: linear-gradient(#999cdb, #f6bdbd);
}
That might be a simple thing, but I don't know what I am missing.
You need to specify a height. Use vh which simply means viewport height which is the height of the user's visible area of a web page. That way it would cover the entire height of the screen no matter the device.
The background-attachment property sets whether a background is fixed or scrolls with the rest of the page.
body {
background: #body-color;
background: -webkit-linear-gradient(#999cdb, #f6bdbd);
background: -moz-linear-gradient(#999cdb, #f6bdbd);
background: -o-linear-gradient(#999cdb, #f6bdbd);
background: linear-gradient(#999cdb, #f6bdbd);
height: 100vh;
background-attachment: fixed;
}
Something like this :
body {
background: linear-gradient(to bottom,rgba(153,156,219,1) 0%,rgba(246,189,189,1) 60%);
height:100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
So there you are:
body{
background: linear-gradient(to bottom, #F4F4F4 50%, #FFE0DA 50%);
background-repeat: no-repeat;
height: 200px;
}
How it works:
to bottom specifies that the gradient flows from top to bottom.
You should specify the color-stop in percentages - here #F4F4F4 stops at 50% and then at 50% #FFE0DA starts. So you get a two-color div without any gradient effect.
To get the gradient effect, just vary the color-stops:
body{
background: linear-gradient(to bottom, #F4F4F4 10%, #FFE0DA 50%);
background-repeat: no-repeat;
height: 200px;
}
Thanks!
I have a page on my site that has a gray background color that I am trying to add gradient to it in a different way than just a left to right. My page has an outer div that takes up 100% of the page's width. I then have an inner div that takes up 80% of the page's with, but auto aligned. I was wondering how, if I can, do a full cycle of my gradient within each side (left & right) of the outer div, the 10% part that shows before the inner div starts.
So say an A equals 10%, and everytime I put two colors together, that is the gradient taking place within that 10%. I want to do this...
#181818, #282828 AAAAAAAA #282828, #181818
How can I do this?
HTML
<div class="graypage">
<div class="homeimg">
gfdsgsg
</div>
</div>
CSS
.graypage, .whitepage { margin: 0 auto; }
/*------Page Wraps--------*/
.graypage {
width: 100%;
left: 0;
right: 0;
min-height: 100%;
background: -webkit-linear-gradient(left, #282828, #181818); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #282828, #181818); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #282828, #181818); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #282828, #181818); /* Standard syntax */
}
.homeimg {
background-image: url("/images/bright_lights_small.jpg");
width: 80%;
background-size: cover;
background-position: center;
height: 100%;
position: absolute;
margin-right: 10%;
margin-left: 10%;
}
As I understand it, you'd like two bars - one on the left of the outerDiv and the other on the right. Each of these bars you'd like to be 10% of the page width. You'd also like each bar to cycle through the colours #181818, #282828, #aaaaaa, #282828, #181818.
I'd just use a linear-gradient with 12 colour-stops. Something like this:
#outerDiv
{
background: linear-gradient(to right,
#181818 0%,#282828 2%,#aaaaaa 4%,#aaaaaa 6%,#282828 8%,#181818 10%,
#181818 90%,#282828 92%,#aaaaaa 94%,#aaaaaa 96%,#282828 98%,#181818 100%); /* W3C */
width: 100%;
}
Credit: http://www.colorzilla.com/gradient-editor/
Here it's applied to the outer div and a solid colour is applied to the (80% as wide) inner div.
EDIT: Here's the (now updated) html and css used.
<style>
body
{
margin: 0;
padding: 0;
}
#outerDiv
{
background: linear-gradient(to right,
#181818 0%,#282828 10%,
#282828 90%,#181818 100%); /* W3C */
width: 100%;
}
#innerDiv
{
width: 80%;
margin: auto;
background-color: #dddddd;
}
</style>
</head>
<body>
<div id='outerDiv'>
<div id='innerDiv'>
<button id='goBtn'>Change the text</button>
<div class="menu-wrapper">
<ul>
<li>WORD1</li>
<li>WORD2</li>
<li>WORD3</li>
<li>WORD4</li>
</ul>
</div>
</div>
</div>
</body>
This code produces the following result:
Bacically, you have 2 posibilities here. You can set a repeating gradient
div {
width: 500px;
height: 100px;
background: repeating-linear-gradient(to right, yellow 0%, green 10%);
}
<div></div>
And you can play with the background-size
div {
width: 500px;
height: 100px;
background: linear-gradient(to right, yellow, green);
background-size: 10% 100%;
}
<div></div>
I have a background image for a hero element on a website that I'm working on. I want to make the background image in the .hero div be on a gradient from transparency to complete opacity on the edges so the backgrounds of both divs blend into each other.
To illustrate, here's the code that I'm using right now in the body of my index.html:
<div class="hero">
<div class="hero-inner">
<h1>My awesome hero element</h1>
</div>
</div>
... and this is what's in my style.css
.hero {
background-color: black;
width: 800px;
}
.hero-inner {
width: 700px;
height: 200px;
margin: auto;
background-image: url('http://i.imgur.com/PXzVXmR.png');
}
.hero-inner h1 {
position: absolute;
font-family: Arial, sans-serif;
color: white;
padding: 10px;
background-color: rgba(0, 0, 0, 0.7);
left: 50px;
top: 20px;
font-size: 48px;
}
Here's the jsFiddle. How would I make the background image in .hero-inner blend in with the background color of .hero on the edges? I've got a similar effect on Photoshop that does the job but I'd like to know if this could be done with CSS3 gradients
You can draw radial background gradient, but code is really ugly and looks heavy.
Here is a gradient editor that may be useful: http://www.colorzilla.com/gradient-editor/
background: -moz-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%, rgba(205,57,71,1) 40%, rgba(80,79,130,0) 83%, rgba(30,87,153,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(23%,rgba(255,48,48,1)), color-stop(40%,rgba(205,57,71,1)), color-stop(83%,rgba(80,79,130,0)), color-stop(100%,rgba(30,87,153,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,48,48,1) 23%,rgba(205,57,71,1) 40%,rgba(80,79,130,0) 83%,rgba(30,87,153,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3030', endColorstr='#001e5799',GradientType=1 );