Home/ Questions/Q 6391679
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T03:43:17+00:00

What’s the best way to create multiple backgrounds with HTML5 and CSS and keep

  • 0

What’s the best way to create multiple backgrounds with HTML5 and CSS and keep your markup semantic? I realise CSS3 supports multiple backgrounds but I want to use gradients also and am interested in how this is being completed practically – not just the theory of it.

The traditional approach might be to do something like:

<div class="background-outer">
  <div  class="background-inner">
    <article class="exiting-news">
      <p>We'll talk about something exciting here</p>         
    </article>
  <div>
</div>

I’d like a way to do this in a way that is cross browser friendly and that doesn’t involve any programmatic work in Javascript or ASP.net/PHP etc

It may be a case of just using more semantic class names, but I’m stumped!

Note: Someone may have answered this already but it’s a difficult thing to search on, apologies if this is a repeat!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It depends on whether it’s a personal project or for a client. Nested divs never hurt anyone, they’re quick, and reliable in all browsers. Use with no shame if it’s for someone else.

    Otherwise, you’re going to have to drop support for some browsers. Using multiple backgrounds in CSS is one way of doing that. The second I use sometimes is, depending on how many backgrounds you have, to position:relative the main block, and position:absolute the :before and :after elements to fill it and set backgrounds on them too. Works on basically all browsers very nicely.

    Edit:

    A validating code sample for the pseudo-element trick I use:

    <!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
div:before {
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
    }
div:after {
    background: -moz-linear-gradient(left, rgba(239,47,47,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(left, rgba(239,47,47,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
    }
div {background: url(http://www.google.co.uk/images/srpr/logo3w.png); position: relative; margin: 1em; min-height: 10em;}
div:after, div:before {content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
div > * {position: relative; z-index:1}
</style>
<div>
<h1>This div has three backgrounds</h1>
<p>Its content has to be wrapped, but that's not normally a 'semantic' problem.
</div>
    • 0