Multiple backgrounds with CSS3

A nice little feature of CSS3 is comma separated values for background attributes, allowing multiple backgrounds to be defined against a single CSS element. No more overlaying several div’s!

Here’s a quick little tip I picked up this morning. With CSS3 you can now have multiple background attributes assigned to the same element, meaning you no longer need to overlay multiple div’s!

How do you do it?

Simple. CSS3 takes comma separated values for each background attribute part. For example;

.MultipleBackgroundDiv {
background-image:url(‘img/topBackground.png’),url(‘img/bottomBackground.png’);
background-repeat:no-repeat, no-repeat;
background-position: top left, bottom right;
}

The above code will load two backgrounds into the ‘MultipleBackgroundDiv’, repeating neither of them. The first background image (‘topBackground’) will be positioned at the top left, whilst the second image (‘bottomBackground’) will be positioned in the bottom right.

John Alexander Rowley

An enthusiastic digital marketing professional passionately dedicated to increasing the online presence of businesses and individuals in order to improve engagement and ROI.

Why I love digital marketing

Redeveloping my website

JohnAlexanderRowley.com has been around since 2009, and seen three serious redesigns – The most recent of which was completed late last month. But why redevelop again in 2014 and what’s changed in this redesign?

Read the full article

Three tips to improve landing page effectiveness

Have you optimised for conversion, but still not seeing conversion rates improve? Landing page copy can often see landing page effectiveness skyrocket if done right.

Read the full article

5 common CSS mistakes

As Steve Jobs used to say: “Always try to make ‘the things you can’t see’ beautiful, too”. Here’s five common CSS mistakes I’ve made in the past, that I’ll be sure to avoid in the future.

Read the full article