Menu
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.
401
CSS background-image. The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.
CSS background-attachment. The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page): Specify that the background image should be fixed:
CSS background - Shorthand property. To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property. The shorthand property for background is background.
The CSS background properties are used to add background effects for elements. The background-color property specifies the background color of an element. Look at CSS Color Values for a complete list of possible color values. The opacity property specifies the opacity/transparency of an element.
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/
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
