Below is an image of a figma design which i working on transforming into a ReactJS page, the background consist of a gradient as follows
background: linear-gradient(180deg, #E5EFFF 0%, rgba(229, 239, 255, 0.262661) 83.7%, rgba(229, 239, 255, 0) 100%);
but as you see in the background there is a another white large line in right side of the page (an image) , so how i can merge the image alone with the background together ? appreciate the feedback
You can apply multiple backgrounds to elements, something like this.
.bg1 {
width: 100%;
height: 400px;
background-image: url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png),
linear-gradient(180deg, #E5EFFF 0%, rgba(229, 239, 255, 0.262661) 83.7%, rgba(229, 239, 255, 0) 100%);
background-repeat: no-repeat,
no-repeat;
background-position: top right,
right;
}
<div class="bg1"></div>
Related
This question already has answers here:
Apply background-size to individual layer of a multiple background
(1 answer)
CSS3 Backgrounds - multiple background-size properties
(1 answer)
Closed 3 years ago.
I have a texture that I want to use as a repeatable background image. I want the background to also contain a gradient overlay on top of the image so that the background fades out to solid white. I was able to get that working like this:
.texture {
width: 100%;
height: 500px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
}
<div class="texture"></div>
The problem is that I would like to make the texture smaller, so I added a background-size in order to accomplish that, but that seems to screw up my gradient overlay as seen below:
.texture {
width: 100%;
height: 500px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
background-size: 100px 100px;
}
<div class="texture"></div>
Is there any way to resize the background image without affecting the way the gradient overlay works?
You can define a different background size for each background image:
.texture {
width: 100%;
height: 500px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
background-size: auto, 100px 100px;
}
<div class="texture"></div>
I'm trying to use http://patternify.com to try to make diagonal lines, it's working but the lines don't seem to be connecting, this is how they show up:
If you look closely you'll see small gaps between where the lines meet.
This is the link to the pattern generator http://ptrn.it/1TonkQe
Any information on how to make these lines connect or a better way to do it would be great thanks
If you want to use diagonal line from patternify copy the css code from here and use as below.
HTML:
<div class="myDiv"></div>
CSS:
.myDiv{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAO0lEQVQYlY3KuREAIAwEsatt66cnkwDD44dAmQRYRVLTTwIsjTOlcU9hvJMbvfTEKB0xSytWaZw6AdYBgzinO79RFiIAAAAASUVORK5CYII=) repeat;
height: 400px;
width: 400px;
}
Yeah I just got the same result as you, I am not a fan of those css generator tools. This is how I create css diagonal stripes: https://jsfiddle.net/d4f3y92h/1/
body{
background-size: 50px 50px;
background-color: #ccc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}
Is it possible to make background with 3 images and gradient?
I would like to make background where one image will be repeat on whole site and gradient will be added on it. Then second image will be display on right center and the third on left center. Please give me an example of use.
Edit:
Now I have
background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 69%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.5) 100%),
url('images/block.png') repeat 0% 0%,
url('images/chef.png') no-repeat 0 0;
You can search info on Google before asking, but here is your answer:
.multi_bg_example {
width: 100%;
height: 500px;
background-image : url(/exp.png),
url(/exp2.png),
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat : no-repeat,
no-repeat,
no-repeat;
background-position: bottom right,
left,
right;
}
http://jsfiddle.net/d1ceayxv/
More info:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
I'm wanting to add a transparent black overlay to a button for it' :active state, so when you click it, it's the same gradient but with just an overlay of e.g. rgba(0,0,0,.3)
The way I thought this would work is (using webkit in this example):
background:rgba(0,0,0,.3), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);
or without the comma, and the order reversed... but nothing shows up at all!
I'm not keen on adding another div to act as the overlay to do it, so is there a strictly CSS way to do this? I was thinking maybe it's a :before or :after pseudo class, but I don't have a clue how to use these!
Would really appreciate an answer, this has been bugging me for a long time.
You can't do that; rgba defines a colour, not an image. What you can do is use a gradient that's not a gradient:
background: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);
This is why I always specify background-image instead of using the shorthand when developing - it makes debugging easier.
You can do it with ::after pseudo-element.
First, you need to define the button CSS with position: relative and then use ::after with position: absolute, like this:
.button {
position: relative;
}
.button:active::after {
content: ' ';
position: absolute;
background: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Live Fiddle demo
Think in Reverse
Set background-color: black and overlay the gradient with your colors converted from hex to rgba (initially set to 1 for alpha), then on :active fade the gradient to 0.7 (which will show 30% black) alpha.
See the fiddle.
button {
background-color: black;
background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
}
button:active {
background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
background-image: -moz-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
}
I'm trying to get a background for some text that is dual-tone, or the top half is one color and the bottom half is another. I have attached a link to a picture of what this should look like. Any ideas on how I can achieve this? Thanks, in advance, for the help!
Michael
http://michaelphillips.dropmark.com/12339/296433
Three ways come to mind:
One: Most Cross Browser (CSS1): Make a 1px wide image of the two colors, probably about 30px tall for each color, then
<span class="duoTone">wrap your text in a span</span>
and set the
.duoTone {background-image: url(path/to/your/img.jpg) left center repeat-x;}
Two: Less friendly to older browsers (CSS2): Same span wrapper as above but with this css (see fiddle).
.duoTone {
position: relative;
}
.duoTone:before,
.duoTone:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
z-index: -1;
background-color: #bbbbbb;
}
.duoTone:after {
top: auto;
bottom: 0;
background-color: #888888;
}
Three: Sleek, but only for newer browsers (CSS3): Same span code as #1 (see fiddle).
.duoTone {
background-color: #888888 ;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .4)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .4) 50%, transparent 50%, transparent);
}