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>
Related
I'm trying to get a background color on part of some tds, so that it looks similar to a progress bar background:
From left to somewhere in the middle, it's colored, and after that percentage, it's white.
And if it's 100%, of course, the whole td is colored.
The color, a linear-gradient, is the same on all tds, but the length will differ. I only have 3 lengths:
30%
70%
100%
Also 0%, but it's just empty then, so this is out of the question
For this, I'm using a specific class for each variation, .progress_**.
Every class has two linear-gradients on the background property.
This is my current working CSS:
.progress_30 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 1) 30%
),
linear-gradient(to right, yellow, green)
;
}
.progress_70 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 1) 70%
),
linear-gradient(to right, yellow, green)
;
}
.progress_100 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 100%,
rgba(255, 255, 255, 1) 100%
),
linear-gradient(to right, yellow, green)
;
}
As you can see, there is a lot that repeats.
I want at least to put the color in a separate .progress class, so it can be changed easily without altering the lengths, and so I can add or alter some lengths without touching the colors in the future.
So I tried this:
.progress {
background: linear-gradient(to right, yellow, green);
}
.progress_30 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 1) 30%
)
;
}
.progress_70 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 70%,
rgba(255, 255, 255, 1) 70%
)
;
}
.progress_100 {
background:
linear-gradient(to right,
rgba(0, 0, 0, 0) 0%,
rgba(255, 255, 255, 0) 100%,
rgba(255, 255, 255, 1) 100%
)
;
}
This doesn't fully work: the white part on the right is the correct length. But on the left, I don't see my linear-gradient, only the page's background color (which isn't white).
Is there a way I can get as few repetitions as possible in CSS, at least have the linear-gradient's color set only once, or do I have to do it like in my first example?
You can rely on background-size and keep the gradient declaration within the same class:
div {
min-height: 50px;
}
.progress {
background:
linear-gradient(#fff, #fff) right no-repeat,
linear-gradient(to right, yellow, green);
}
.progress_30 {
background-size: 70% 100%, auto;
}
.progress_70 {
background-size: 30% 100%, auto;
}
.progress_100 {
background-size: 0% 100%, auto;
}
<div class="progress progress_30"></div>
<div class="progress progress_70"></div>
<div class="progress progress_100"></div>
You can simplify more using CSS variable in case you want to consider more percentage values:
div {
min-height: 50px;
}
.progress {
background:
linear-gradient(#fff, #fff) right/calc(100% - var(--p,50%)) 100% no-repeat,
linear-gradient(to right, yellow, green);
}
<div class="progress" style="--p:30%"></div>
<div class="progress" style="--p:68%"></div>
<div class="progress" style="--p:80%"></div>
<div class="progress" ></div>
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?
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);
}
This question already has answers here:
How to apply a CSS gradient over a text, from a transparent to an opaque colour
(3 answers)
Closed 3 years ago.
Is it possible to achieve this with just one div (no background images/foreground images/layers)?
Example on codepen: http://codepen.io/anon/pen/sbHAc/
Relevant CSS
ol {
border : 1px #d8d8d8 dashed;
position : relative;
}
ol:after {
content : "";
position : absolute;
z-index : 1;
bottom : 0;
left : 0;
pointer-events : none;
background-image : linear-gradient(to bottom,
rgba(255,255,255, 0),
rgba(255,255,255, 1) 90%);
width : 100%;
height : 4em;
}
Resulting effect
if the browser supports the pointer-events property (all major browsers except IE<=10) then the text under the gradient will be also selectable/clickable.
I (personally) find that using a secondary element as an "overlap" works pretty well. I do this by defining a new tag. This makes it really easy to add the desired fade out effect to any element you want using <fade/> at the end.
div {
position: relative;
}
fade {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
height: 50px;
background-image: linear-gradient(to bottom,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.9)
100%);
}
<div>
text
<br>
text
<br>
text
<fade/>
</div>
Giving the fade element an absolute position with a gradient background works just as expected. As long as you remember to set the parent's position to relative.
<style>
.fade {
position: relative;
bottom: 4em;
height: 4em;
background: -webkit-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
</style>
Here is an example for you http://jsfiddle.net/nrgx7/
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);
}