I'm testing a webpage on chrome and safari iOS. When I use the CSS class below, the browser displays a pseudo-checkboard pattern web page with pattern. But the same style on iOS safari shows web page with no pattern. It seems to be a problem with using "repeating-linear-gradient" twice. Any advice?
#background {
opacity: 0.8;
background-color: var(--ion-color-dark);
background-image: repeating-linear-gradient(
45deg,
var(--theme-primary-color) 25%,
rgba(255, 255, 255, 0) 25%,
rgba(255, 255, 255, 0) 75%,
var(--theme-primary-color) 75%,
var(--theme-primary-color)
),
repeating-linear-gradient(
45deg,
var(--ion-toolbar-background) 25%,
#ffffff 25%,
#ffffff 75%,
var(--ion-toolbar-background) 75%,
var(--ion-toolbar-background)
);
background-position: 0 0, 40px 40px;
background-size: 80px 80px;
}
Figured out the issue, it's an interaction with css variables and multiple repeating-linear-gradients. The solution is to not use multiple variables for the colour
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 have a scheduler-like component on my web application which consists of a lot of divs. Some of these divs can be completely red, some can be completely white, some can be half-red half-white and some can be striped red-white.
The ones that are half-red half-white have this background in css:
background: linear-gradient(169deg, rgba(240,91,38,0.30) 49%, rgb(255, 255, 255) 51%);
And they look like this:
The ones that are striped have this css code:
background: repeating-linear-gradient(45deg, #ffd6cc, #ffd6cc 10px, #ffffff 10px, #ffffff 20px)
And they look like this"
I am stuck on what I should do next - I need to have cells that are combination of both of the above. So the div needs to be like in the first image, but instead of the whole upper triangle being colored red, the triangle should be striped. Is there a way to do this with css?
You can have multiple gradients per background
.half-cell {
background: linear-gradient(162deg, rgba(255, 255, 255, 0.0) 49%, rgb(255, 255, 255) 51%), repeating-linear-gradient(45deg, #ffd6cc, #ffd6cc 10px, #ffffff 10px, #ffffff 20px);
}
div {
width: 606px;
height: 200px;
border: 1px solid black;
}
<div class="half-cell"></div>
i have this code on Codepen:
body {
width: 100px;
height: 100px;
background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 60px 60px;
background-position:0 0, 30px 30px;
}
for some reason I get this message:
Invalid CSS after "100px": expected expression (e.g. 1px, bold), was
";"
Any idea what's going on?
see it on Codepen
When using SASS, you don't need any curly brackets or semicolons. You also have to get rid of any line breaks in comma separated values.
I don't know about the backwards-capability of SASS to CSS, but see the Codepen working with SASS enabled:
http://codepen.io/anon/pen/ygxKvK
body
width: 100px
height: 100px
background-color: #eee
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black)
background-size: 60px 60px
background-position: 0 0, 30px 30px
http://codepen.io/isaacalves/pen/OWoQGP - This works now.
Just set the CSS pre-processor settings as SCSS
I was just confusing Sass with Scss.
http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
Is it possible or is there a trick to make a background pixelated like the one in the image attached?
I use a background image, but as you can see it doesn't scale and it flashs on page scrolling.
Now I have CSS thanks to vlcekmi3:
background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:100px 100px;
background-position: 0 0, 50px 50px;
But I'm unable to make it exactly like the image. Can someone check it?
Any code, resource, tutorial, and suggestion is appreciated.
From thirtydot's comment in the first post. Should have posted it as an answer - Brilliant. I almost missed it. Please rate his comment up :) I am only posting this as an answer so it might help others as it helped me.
Using a base64 encoded message:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);
http://jsfiddle.net/thirtydot/v7T98/3/
Here's the best I could come up with to match your image. It's adapted from the example here by Lea Verou What will be your fallback for non css3 browsers?
body {
background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%),
-moz-linear-gradient(-45deg, #666 25%, transparent 25%),
-moz-linear-gradient(45deg, transparent 75%, #666 75%),
-moz-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%),
-webkit-linear-gradient(-45deg, #666 25%, transparent 25%),
-webkit-linear-gradient(45deg, transparent 75%, #666 75%),
-webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%),
-o-linear-gradient(-45deg, #666 25%, transparent 25%),
-o-linear-gradient(45deg, transparent 75%, #666 75%),
-o-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: linear-gradient(45deg, #666 25%, transparent 25%),
linear-gradient(-45deg, #666 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #666 75%),
linear-gradient(-45deg, transparent 75%, #666 75%);
-moz-background-size: 2px 2px;
background-size: 2px 2px;
-webkit-background-size: 2px 2.1px; /* override value for webkit */
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}
jsfiddle example
The "flickering" you observe is is not a software issue, but a hardware one. Basically, it's caused by that fact that the pixels on your screen can't change color instantly. Since your dotted background consists of alternating rows of pixels, any time you scroll down by an odd number of pixels, there will be a brief moment when your screen is switching between two shifted copies of the pattern, and this will appear as flicker.
This thread on Graphic Design Stack Exchange features an even more dramatic example of the same effect, and also explains why it happens in more detail. Just for a quick demonstration, let me borrow one of the images from Volker Siegel's answer:
Note how, on most screens, this image will show a noticeable "pulsing" effect when scrolled. (It may also appear to flicker a bit even while just looking at it, simply because the photoreceptors in your eyes also have some response delay and adaptation effects.)
Anyway, the only way you can stop your dotted background from flickering while scrolling is to make it not scroll. Fortunately, there's a CSS property just for that:
background-attachment: fixed;
Other than that, there's not much else to it. The best way to actually render the background is almost certainly with a simple two-color PNG image. You can even make the image semitransparent, so that you can layer it on top of different colored backgrounds. See the snippet below for a demonstration:
body {
background-color: white;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ/8lyQAAAABJRU5ErkJggg==);
background-attachment: fixed;
}
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
Note how the pattern does not flicker when you scroll it with the inner scroll bar. (It does flicker when you scroll the whole SO page, because the pattern is attached to the <iframe> it's displayed in, and will scroll along with it.)
(BTW, the inline image I've used in the snippet above is 16 × 16 pixels, even though the actual pattern is just 2 × 2 pixels. Repeating it a few times doesn't cost much in terms of file size, though, and might be slightly safer, as I seem to recall some older browsers having issues with very small background images.)
How about this one?
.card {
background: linear-gradient(90deg, #fff 2px, transparent 1%) center, linear-gradient(#fff 2px, transparent 1%) center, #ccc;
background-size: 5px 5px;
height: 10em;
width: 30em;
position: relative;
}
.text {
font-size: 2em;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="card">
<div class="text">
Hello world!
</div>
</div>
In general the formula is
// color
$bg-color: #fff;
$dot-color: $gray-darker;
// Dimensions
$dot-size: 3px;
$dot-space: 5px;
background: linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center, $dot-color;
background-size: $dot-space $dot-space;
as seen # https://codepen.io/edmundojr/pen/xOYJGw
This is because of background-size, so just try this:
background-size:2px 2px;
Without all the browser prefixes:
background: linear-gradient(
45deg,
#fff,
#fff 50%,
#000 50%,
#000
);
background-size: 2px 2px;