Full-width divs behind main content / wrapper.(But with a repeating background) [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 8 years ago.

First question posed, so apologies if it is not worded correctly or vague.
My question is this: Can a fullwidth div be put in the background of a wrapper? Here is what I'm trying to achieve: (Not enough reputation to upload image?)

Basically, I would like a full-width gradiented banner behind the main content / wrapper. There is however, also a repeating background pattern too.

Like on the Rosetta Stone Example: http://www.rosettastone.co.uk/lp/branduk/?gclid=CNTzoOPihrcCFSXLtAodMyMAEg&rd=0&cid=se-gguk113f2&s_tnt=59574:1:0 the banner image overlaps the background yellow.

Can this be achieved with the way I'm going about it? I'm using Dreamweaver CS6 and my CSS skills are basic.

Thanks in advance for any help.

Cheers

Answer 1

You should get started by adding:

<div class="banner"></div>
<div>
    //Content with wrapper
</div>

CSS:

.banner{
    position: absolute;
    top: 0;
    z-index: -1;
    with: 100%;
    height: 100px;
    background-image: 'your-image';
    background-repeat:repeat-x; //Whatever condition you need.
}