Bonjour,
J'ai un site où la page d'accueil contient une image remplie de toute la page et le reste des autres ont simplement une couleur d'arrière-plan.
Jusqu'à présent, j'ai créé deux fichier CSS, mais peut-être quelqu'un connaîtrait une manière de faire pour ne pas avoir deux fichiers CSS pour le même site ? Où lequel pensez-vous que c'est plus pratique et moins chiant à mettre en place ? Merci.
Bonne journée
(Alt + 7 3 fois puis espace) marche pas !
Pas grave, laisse tomber, on ne va pas nuire le topic, ce n'est pas le sujet. :)
Hello,
tu dev sur quoi ? From scratch ? Wordpress ? Framework ?
De façon générale, tu n'as pas besoin d'avoir deux css pour un site, en tout cas pas pour ça.
Le plus simple étant de mettre une classe sur ton body par exemple (pas recommandé), ou sur une section qui englobera tout ton site, et sur ta page d'accueil elle a une classe ou tu lui appliquera un background image, et sur les autres une couleur.
@Arzou Bonjour,
Non, c'est un site fait maison, HTML/CSS, Bootstrap.
Dans mon CSS pour la page d'accueil, j'ai mis dans Body :
.body{
background-image: url(../img/imageaccueilclair.jpg);
}
Peut-on créer un div avant le body pour l'englober ? Ensuite appliquer l'image sur ce div et dans mes autres pages, j'enlève ce div c'est ça ?
Nan, pas Alt, il faut AltGr (le alt qui est à DROITE du bouton espace) :)
Mmmmh ca va c'est juste une question rapide au passage :p
Alors pour la div qui englobe le body non, le body représente la fenetre
Ensuite tu peux utiliser les classes, et ne rien mettre de custom dans le body, le body doit représenter toutes les pages, ton contenu devrait etre dans une section:
Pour la page d'accueil
Pour les autres pages
Et le CSS
Quand tu mettra du PHP dans ton site tu pourras faire des classes dynamiques :p
Merci Popotte, c'est ce que je voulais dire, mais en plus complet ;)
Bonsoir,
Cela marche mais je ne vois qu'une partie de mon fond, quand j'ai réduit la fenêtre, je vois l'image de fond qui est derrière sur la page d'accueil, mais tout le reste est caché. Idem pour les autres pages, là il n'y a que la couleur mais c'est caché par la couleur blanche le haut et le bas.
Est ce que tu pourrais nous montrer un screenshot ? et comment tu l'as codé ?
Hello,
Attention! C'est le body qui contient l'integralité du contenu de ta page. la section n'est ni plus ni moins qu'un element du body et donc de ta page.
Je te conseil pour ton soucis :
Hello,
Pour répondre à la question de Arzou, voici le résultat en capture d'écran : https://ibb.co/rtV1sfj
Sinon pour le code :
en HTML :
<body>
<section class="bg-home">
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-end">
<a class="navbar-brand" href="index.html"><img src="img/logo2021.png" alt="logo"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-nav mr-auto justify-content-end" id="navbarSupportedContent">
<a class="nav-link active" href="index.html.............</a>
</div>
</nav>
<div class="montitre">
<div class="col">
<p>Mon Nom</p>
</div>
</div>
<div class="montitre2">
<div class="col">
<p>MON TITRE</p>
</div>
</div>
</div>
</div></div>
<div class="container-fluid bg-light text-right">
<div class="row reseaux">
<div class="col">
</div>
</div><div class="footer">
<div class="row reseauxicons">
<div class="col-12"> <!--col-12 pour que les icônes s'alignent à droite même en responsive-->
<ul class="socialicons"> <!--mes réseaux sociaux-->
<li><a href="https://twitter.com...................</a></li> <!--J'ébrège le code-->
</ul>
</div>
<div class="col">
<p>© .............. • Tous droits réservés</p>
</div>
</div> </div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com.........</script>
</section>
</body>
en CSS :
html {overflow-y: scroll;
}
body {
font-family: 'Fira Sans', sans-serif;
font-size: 14px;
background-size: cover;
}
.bg-home{
background-image: url('../img/imageaccueilclair.jpg');
height: 100%;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.bg-pages{
background-color: #f3f3f3;
height: 100%;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
font-size: 15px;
}
@bunny,
Cela a fonctionné, avec un seul CSS ^^ Merci beaucoup ! Et merci à vous tous !
Bonne soirée
PS : au fait, comment faites-vous pour mettre le code plus propre dans le topic SVP ? Je ne vois rien qu'on peut sélectionner le code.
Tu fais une ligne avec 3 fois backtic (bouttons altgr + 7 3 fois puis espace)
Les autres lignes tu mets toutes tes lignes de code
Et ligne suivante tu fermes avec 3 backtics
:p
genre ? dans quelle situation ?
Cela serait bien de savoir, mais en tout cas pour mon cas cela a marché, donc pas besoin de 2 fichiers CSS.
It's perfectly possible to use both a color and an image as background for an element. You set the background-color and background-image styles.