28112 sujets

CSS et mise en forme, CSS3

Bootstrap : fond différent selon row

Bonjour à tous,

J'utilise Bootstrap et j'aimerais gérer différents fonds selon les lignes. J'aimerais arriver à ce résultat : https://www.umontpellier.fr/recherche

J'ai fait des test pour le moment en utilisant un conteneur simple (container) pour avoir une largeur fixe mais comment procéder pour avoir ce type de rendu avec différents backgrounds selon les row ?

De plus utilisant un conteneur à largeur fixe, si j'applique un background à ce niveau, il n'occupera que cette largeur et non toute la largeur de l'écran.

Merci de vos conseils Smiley smile
Le site mentionné est affreux en terme de code, mais si l'on ne connait pas le truc on peut le trouver dans son code inline si l'on cherche bien. Bref, la règle que vous cherchez est `background-attachment: fixed`.

Voici un exemple sur CodePen : background-attachment: fixed
Je vous remercie de cette précision. Ma question est surtout où placer ce code pour avoir ce rendu. J'ai actuellement sur mon site qui fonctionne avec Bootstrap :

- le body avec un fond blanc ;
- le conteneur simple (donc largeur 1170 px centré) avec un fond blanc ;
- 3 rows sur fond blanc également.

J'aimerais placé un fond image fixe sur toute la largeur de la page sur la deuxième row.

Est-ce possible ? et si oui auriez-vous une piste ?

Car quand je l'applique à une row ou au conteneur, forcément cela n'occupe que la largeur de 1170 px. Et je ne vois pas comment je peux solutionner cela Smiley decu

Merci Smiley smile
Modérateur
Il faut simplement encapsuler le "conteneur" (qui fait 1170px) dans un <div>, <section>, <article>, ou autre pour ensuite appliquer le background sur cette balise qui ira de bord à bord.
<section class="bg-1">
	<div class="container">
		<h4></h4>
		<p></p>
	</div>
</section>
<section class="bg-2">
	<div class="container">
		<h4></h4>
		<p></p>
	</div>
</section>

Modifié par Yordi (14 Mar 2018 - 11:31)
Modérateur
Oui, au vu de la structure, tu peux supprimer les class "container-fluid" de "#container", supprimer le ".row-fluid" et le ".col-md-12".

Dans ce cas, ce sont des class qui ajoutent des paddings, donnent des margins négatives mais il y en a un peu trop et tu ne les utilises pas au final.
Modifié par Yordi (14 Mar 2018 - 17:01)
Merci beaucoup de ces précisions. Le souci est qu'il s'agit d'un sous-site sur lequel je ne peux pas agir partout. En gros sur le html, je peux intervenir à partir de la classe "Container" présente sous le menu. Y aurait-il un moyen d'annuler les effets de "container-fluid" de "#container" sans les supprimer ?
Sujet clos
Aller à