Versatile Background Patterns With CSS

One thing that has always bugged me about background patterns in web design is the lack of versatility in changing colours. It has always felt like changing the colour of the pattern could be easily done using CSS background colours, but I could never dial down the process to best achieve this.

Thankfully for me this excellent tutorial on Creating Reusable & Versatile Background Patterns from Web Designer Wall details exactly what is involved in extracting the pattern from an existing image.

View demo

Background Images Not Displaying in Chrome

Recently I switched my default browser from Firefox to Chrome, in doing so came across a strange issue with background images not displaying on a number of sites when using Chrome. Investigation into this showed that the image to the path and was correct, as was the CSS to display it.

The problem came down to the fact that in the CSS the background-image was only being attached to the body element, this was sufficient for every other browser I tried but Chrome required the background-image also be attached to the html before the image would load.

/* Not working */
body {
    background-image: url(../images/bg-primary.jpg); 
} 
 
/* Working */
html, 
body {
    background-image: url(../images/bg-primary.jpg); 
}

Different CSS Transitions on Mouse In and Mouse Out

Prior to CSS3 the most effective way to implement mouse hover animations was using JavaScript. Now that cross browser CSS3 transitions support has grown beyond being restricted to WebKit I have started experimenting more with transitions and quickly came across the problem of wanting to use a different transition effects on mouse in and mouse out events.

Initially looking at the syntax for this it doesn’t appear to be possible, however this can be done using the following simple trick as originally documented on Design Shack and CSS Tricks.

div {
    background: black;
    color: #fff;
    margin: 0 auto;
    padding: 100px 0;
    -webkit-transition: -webkit-border-radius 0.5s ease-in;
    -moz-transition: -moz-border-radius 0.5s ease-in;
    -o-transition: border-radius 0.5s ease-in;
    -ms-transition: border-radius 0.5s ease-in;
    transition: border-radius 0.5s ease-in;
    text-align: center;
    width: 200px;
}
 
div:hover {
    background: gray;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    transform: rotate(720deg);
}

The key to achieving the desired behaviour on mouse in and mouse out is to specify the mouse over transition in the hover state and the mouse out transition in the regular state.

View demo