Background color sur toute la largeur d'un écran

Bonjour à tous,
Malgré mes nombreuses recherches (dont ce site) je n'ai pas réussi à trouver réponse à ce problème :

Contexte technique : j'ai réalisé un template à l'aide d'Artisteer pour un site Joomla 3.4.5. La largeur de mon template est de 1200 pixels pour la page des contenus (body). Les hearder et footer sont à 100% de la largeur de l'écran.

Besoin : je souhaiterai pouvoir avoir un background de couleur sur la totalité de la largeur de l'écran pour les modules que j'affiche (qui eux-même contiennent du contenu avec une largeur de 1200 pixels comme le body). J'espère être assez clair. Voir image en pièce jointe.

Merci d'avance pour l'aide que vous pourrez m'apporter.

Bonjour et bienvenue sur le forum,

Le plus simple pour que l'on puisse t'aider, c'est que l'on ait un peu de code... là, c'est un peu dur.

Bonjour SolidSnake,
Voici un exemple de site où on voit bien la possibilité de déterminer des bandes de couleur, des fonds pour des parties de pages (parties appelées "module contenu personnalisé" chez Joomla) tout en respectant la largeur du body pour conserver la bonne largeur de texte (un peu plus de 900 pixels environ pour cette page) : http://demo.joomlashine.com/index.php?view=demo#jsn_vintage

Voici le site concerné par le problème. Dans cette home page http://jereprendslecontroledemavie.com/
dont la largeur de body est de 1200 px, les parties "L'émission de radio du mois" ou "Votre coach avec vous où que vous soyez..." ont un backgroundcolor mais qui s'arrête comme le texte à 1200 px alors que j'aimerais que la couleur soit à 100% de la largeur de l'écran.

Ci-dessous, exemple avec le code source pour la partie "Votre coach avec vous où que vous soyez..."

<div style="background-color: #fce8d6;">
<div style="background-color: #fce8d6;"> </div>
<h2 style="text-align: center;">Votre coach avec vous où que vous soyez par <span style="color: #ff6600;">téléphone</span> ou <span style="color: #ff6600;">Skype</span></h2>
<div class="art-content-layout-wrapper" style="margin: 0px 35px 0px 35px;">
<div class="art-content-layout" style="border-collapse: separate;">
<div class="art-content-layout-row">
<div class="art-layout-cell" style="padding: 0px; vertical-align: top; width: 25%;">
<table class="art-article art-preview-show-borders-table" style="width: 90%; margin: 10px auto 10px auto;">
<tbody>
<tr>
<td class="art-preview-show-borders-cell" style="vertical-align: top; width: 100%; text-align: center;"><img class="art-lightbox" style="border-width: 0px; margin: 0px 20px 0px 20px;" src="images/zone-intervention-coaching.png" alt="Coaching quelquesoit le lieu où vous vous trouvez" width="60" height="60" border="0" /></td>
</tr>
<tr>
<td class="art-preview-show-borders-cell" style="width: 100%; text-align: center;"><strong><span style="color: #ff6600;">CONFORT</span></strong></td>
</tr>
<tr>
<td class="art-preview-show-borders-cell" style="width: 100%; text-align: center;">Votre séance peut se dérouler où que vous soyez (domicile, bureau, déplacements) par téléphone ou Skype.</td>
</tr>
</tbody>
</table>
</div>
<div class="art-layout-cell" style="padding: 0px; vertical-align: top; width: 25%;">
<table class="art-article art-preview-show-borders-table" style="width: 90%; margin: 10px auto 10px auto;">
<tbody>
<tr>
<td class="art-preview-show-borders-cell" style="vertical-align: top; width: 100%; text-align: center;"><img class="art-lightbox" style="border-width: 0px; margin: 0px 20px 0px 20px;" src="images/duree-seance-coaching.png" alt="Entretien avec votre coach à tout moment de la journée" width="60" height="60" border="0" /></td>
</tr>
<tr>
<td class="art-preview-show-borders-cell" style="width: 100%; text-align: center;"><strong><span style="color: #ff6600;">EFFICACITÉ</span></strong></td>
</tr>
<tr>
<td class="art-preview-show-borders-cell" style="width: 100%; text-align: center;">Vous bénéficiez d'une meilleure gestion de votre temps et de vos priorités. Votre coach s'adapte à votre agenda. Votre séance de coaching est rentabilisée à 100%.</td>
</tr>
</tbody>
</table>
</div>
<div class="art-layout-cell" style="padding: 0px; vertical-align: top; width: 25%;">
<table class="art-article art-preview-show-borders-table" style="width: 90%; margin: 10px auto 10px auto;">
<tbody>
<tr>
<td class="art-preview-show-borders-cell" style="vertical-align: top; width: 100%; text-align: center;"><img class="art-lightbox" style="border-width: 0px; margin: 0px 20px 0px 20px;" src="images/dialogue-coaching.png" alt="Dialogue avec votre coach" width="80" height="60" border="0" /></td>
</tr>
<tr>
<td class="art-preview-show-borders-cell" style="width: 100%; text-align: center;"><strong><span style="color: #ff6600;">DISCRÉTION</span></strong></td>
</tr>
<tr>
<td class="art-preview-show-borders-cell" style="width: 100%; text-align: center;">Vous êtes à l'aise pour discuter de vos préoccupations dans un environnement que vous seul(e) avez choisi. La séance de coaching est pleinement vécue.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="background-color: #fce8d6;">
<div style="background-color: #fce8d6;"> </div>
<p style="text-align: center;"><a class="art-button" title="Accéder à la page des offres" href="coaching-de-vie/tarifs-paypal" target="_parent" rel="alternate">Offres de coaching</a></p>
<div style="background-color: #fce8d6;"> </div>
</div>
</div>
</div>