CSS Background-image tricks and gotchas

Using a css background-image property is CSS allows for versatility in creating a background element. The css background image property can be applied to a graphic which includes, PNG, JPG, GIF, WEBP, and SVG, alongside the special case of using a gradient as the background.          

There are then multiple files that can be used for a background, but only two different image types, those being the previously listed image file types and then the gradients. Here is a sample of a basic background with a regular image.

body {
 background: url(examplePic.jpg);
}

Using the url() value you can provide a path through to the file to any image of your choosing as it will then show up as the background. You also have the option to include background-images with sprite images. This is a great method to reduce HTTP requests. Learn more here about sprites and what they’re used for.

A great option with backgrounds is by using the browser to create an in-house gradient. A gradient is split in between two different kinds, both linear and radial. There are numerous ways of creation and methods to make outstanding patterns, interesting and engaging functions as well. Gradients are technically another background image.

CSS Background Image Tricks

You have the possibility to use multiple images or even a mixture of standard images and gradients to create a background. For the most part all background images are supported by modern supported browsers for both graphics and gradients.

You should be aware that when using multiple background images there are issues that can arise in the stacking order. You’ll want to list the image that should come into the front first, followed by the image at the back last. It seems straightforward at first, but you have to realize that you’ll need to set more values for other elements in the background so everything is in place.

body {
 background: url(logoExample.png), url(patternExample.png);
}

There are no limits to the amount of background images that can be set, and you can even animate your background image. Here is a list of fundamental properties:

• Background: An element that will set all properties of the background in one declaration.
• Background-attachment: This property will set a background image that is either fixed or scrolls alongside the rest of the page.
• Background-color: A property that sets the color of an element in the background.
• Background-image: A property that sets the image of an element in the background.
• Background-position: Controls the starting position of a background image.
• Background-repeat: Controls how many times a background image will be repeated.

Check out a background image made from a gradient that can be played with, layered and tweaked to fit your own design agenda.

See the Pen CSS Radial Gradient by Mike Colagrossi (@SantinoMPC) on CodePen.

Finally, the area that might become a “gotcha” for you is when using Data URls. You don’t have to link to an external image file when using an image element in HTML or creating a background-image. With this you have the ability to embed the image straight into the document.

The basis of the code will look something like this:

li {
 background:
   url(data:image/gif:[<mime type>][;charset=<charset>][;base64],<encoded data> )
   no-repeat
   left center;
}

Some research has found that embedding images directly into the code will result in a drastically slower load time for users, which is a big no go. If used correctly in an oversized file, then there are some helpful possibilities in regards to less HTTP Requests.

Overall, background-images can offer a lot, and are highly versatile tools to making sure your website has a uniform and creative overarching image set to it.