![]() ![]() The shorthand background property will know what you mean if you declare one or the other. This comes in useful in a few ways which we’ll get into later. To repeat horizontally an image (80x80) three times: background-image: url ('bgtexture.png'), url ('bgtexture.png'), url ('bgtexture.png') background-repeat: no-repeat, no-repeat, no-repeat background-position: 0 top, 80px top, 160px top Beware: not working on IE under 9 version ( source ). While declaring the a solid color uses background-color property in CSS, gradients use background-image. Like how you can use the background-color property in CSS to declare a solid color background, you can use the background-image property not only to declare image files as backgrounds but gradients as well. ![]() We've curated and parameterized this collection of pure CSS patterns to help you generate & customize the most cool CSS seamless patterns around the web. What isn’t obvious while looking at the syntax is which image is on top in the. CSS Background Patterns is fun little free tool that lets you create cool CSS patterns for your website background. I find it’s easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. The syntax is easy, you just comma separate them. Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. Multiple background images is a cool feature of CSS3. ![]() Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |