View Site Navigation

Primary Content

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.

Versatile Background Patterns

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

Quick Tips on Trademarking Logos

When creating logos suitable for trademarking it is important to provide the client with a simplified version of the logo, that is with all colour and gradients removed. The reasoning behind this is that if the logo were to be copied and a different colour used this may be seen as enough to qualify the copy as a new logo.

It also important to add the trademark ™ symbol to the logo, which as specified on the Intellectual Property Office website is perfectly acceptable to use without the logo being registered.

(the ™ symbol) … does not indicate that your trade mark is actually registered, only that it is being used as a trade mark. The symbol ‘TM’ has no legal significance in the United Kingdom.

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.

Chrome and Firefox Background Image

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); 
}