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

Technical Web Typography

Typography is a design element that has always fascinated me, when done well it instantly impresses and makes communicating the message appear effortless. Good typography is something I have always strived for, but is often the element that I am least satisfied with in my designs; no matter how hard I work at it I never seem to be able to get it quite right.

Being a skill that I have wanted to improve upon for some time I was excited by the recent Technical Web Typography: Guidelines and Techniques article on Smashing Magazine and decided to put the techniques covered into practice.

I found this very informative and extremely easy to follow; it has certainly filled a few gaps in my typography knowledge. I would recommend reading this article to anyone looking to improve on their typography and I am looking forward forward to applying the results to this site. You can view the demo I created whilst following this article below.

View Demo