I am trying to combine three things:
Gradient background
Offset background
Background image
I essentially want to achieve exactly what I have in my JSFiddle below, but with the gradient following no matter what size.
https://jsfiddle.net/023hqb6w/
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("https://c.tadst.com/gfx/750w/sunrise-sunset-sun-calculator.jpg");
background-size: cover;
background-position: 50% calc(50% - 150px);
background-repeat: no-repeat;
How do I do that?
Related
I want a radiant gradient background that is a circular, not ovoid. I want it to scale to the fit the container, which may not be square.
Cover/contain don't treat radial-gradient like a square image, which I suppose makes sense.
Setting background width to 100% operates X and Y independently still.
Setting a fixed px size doesn't allow it to scale to the container.
Are there any pure-CSS ways to make this happen? Maybe a special property value to make the radial gradient act "square" for cover/contain sizing?
.gradier{
height:200px;
width: 300px;
background-image: radial-gradient(rgba(0,255,255, 0.2) 55.5%, rgba(0,255,255,1) 56%, rgba(0,255,255,1) 57%, rgba(0,255,255, 0) 57.5% );
background-size: 100px 100px;
background-size: contain;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div class="gradier"></div>
Use circle closest-side
.gradier {
height: 200px;
width: 300px;
border: 1px solid;
background: radial-gradient(circle closest-side, rgba(0, 255, 255, 0.2) 96%, rgba(0, 255, 255, 1) 97% 98%, #0000);
}
<div class="gradier"></div>
Or circle farthest-side
.gradier {
height: 200px;
width: 300px;
border: 1px solid;
background: radial-gradient(circle farthest-side, rgba(0, 255, 255, 0.2) 96%, rgba(0, 255, 255, 1) 97% 98%, #0000);
}
<div class="gradier"></div>
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 trying to create a flickr icon using font-awesome, and would like to represent the colors accurately (which means a purple and blue dot on each side of the icon). I'm trying to do this with LESS using gradients. But I've been unable to figure out how to vertically align the gradients (I can only figure out horizontal).
What I have so far:
.fa-flickr:before {
color: #fff;
background-image: linear-gradient(to left, #0062da 100%, #0062da 100%),
linear-gradient(to right, #ff0084 100%, #ff0084 100%);
background-size: 100% 50%, 100% 50%;
background-position: 0 0, 0 100%;
transform: rotate(90%);
background-repeat: no-repeat;
}
http://jsfiddle.net/FQJhE/2/
This leaves the gradients stacked in the wrong direction, and shows extra color outside the icons. I'd appreciate any pointers on how to get the gradients rotated, and any help on the excess colors would be great as well.
Looks like this is what you want:
.fa-flickr {
color: #fff;
background-image: linear-gradient(to right, #0062da 50%, #ff0084 50%);
background-size: 80% 80%;
background-position:center;
background-repeat: no-repeat;
}
Demo.
Reference JS Fiddle
Instead of using two different gradients, why not use a single gradient with stops that start and end at the same point.
.fa-flickr:before {
color: #fff;
background-size: 100% 50%;
background-repeat: no-repeat;
background-position: 0% 50%;
background-image: linear-gradient(
to right,
#0062da 50%,
#ff0084 50%
);
}
As for the overflow I've simply made it smaller and given it a vertical offset to fit inside the icon.