Complete background pattern coded from CSS

Question

I am trying to rely on more code than images with my web design and in my effort to be more effective in HTML5 and CSS3.

I have searched all Stack Exchange sites but nothing solid resulted. That being said, something I would really like to learn more about is pattern creation with pure CSS for website backgrounds.

I was wondering if this can be created with pure CSS coding?

Answer 1

CSS3 does not have the ability to create patterns on the level that you have in mind. CSS pattens are very basic and use small blocks of patterns to build up a large scalable/repeatable block based background.

CSS patterns are basic your image is not basic

The image that you have used does not repeat and is more suitable for using it as a: {background: url("background.jpg");} or you could use Base64 and embed the image to the CSS file.

Creating basic patterns using C33

There is various ways you can make CSS3 Patterns on the fly using JavaScript/CSS and CSS3. I recommend you check out this article: CSS3 Patterns Explained, or another method of making simple patterns using Base64 embeds is using Patternify.