n00b News- Adding Texture to your Site

By Jason Land

The first week at Origin Code Academy is mostly focused on JavaScript basics. A lot of our first projects look very much the same, especially once our teacher introduces CSS frameworks to us (Bootstrap is popular, but I prefer Pure).

However, the blank backgrounds can be boring, despite Google’s full court press with Material Design.

pure
A flat design, super boring.

Our solution was to add some code to the body tag in CSS like so:

body{
    background-image: url('images/gplaypattern.png');
    background-color: #558ED3;
}

The first line in that CSS rule sets an image for the whole body of the HTML page. However, this has to be a transparent PNG file. The background-color rule tints it, and is changeable without re-rendering a new PNG file.

green
pink
We used textures from  Transparent Textures and Subtle Patterns

Note: You’ll have to open the PNGs from Subtle Patterns in a photo editor that lets you change the transparency and bring it under 100%, as they only offer opaque images.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s