How to Add Full Width Background Image in Joomla 3x

Question

I want to add a full width background image for a div in an article in Joomla 3x, but I have no idea how. The article or modules can add the suffix class but only applied for the article's or module's div, still not full width.

code example:

<div class="container">
    <div class="article-wrapper">article here</div>
</div>

The suffix class I can add is to article-wrapper only, but I need to add into container .

Anyone help?

Answer 1

All you really need to do is add a custom CSS file specifying a suitable selector and background image like this or similar:

#content { 
  background: url(background-image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

The selector will depend on the template so you'll need to do some digging with FireBug or Developer Tools or similar.

Answer 2

The code below should work. But this .container div should be full width too.

.container { 
    background: url(background-image.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

If you have more then one .container divs on that page then you will have to use the child selector. ie

#maincontainer .container:firstchild {
    //code here//
}