Forum : Une image de fond et une couleur au sein du même Site

Réponse acceptée

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 :

<!-- Page d'accueil -->
<html>
  <head>
  ....
  <link rel="stylesheet" href="/style.css">
  </head>
  <body class="home">
  ...
  </body>
</html>

<!-- Autres page -->
<html>
  <head>
  ....
  <link rel="stylesheet" href="/style.css">
  </head>
  <body>
  ...
  </body>
</html>

/* style.css*/

//CSS pour tous les body
body {
    background-color: #couleur
}

//CSS pour la homepage
body.home {
    background-image: url(lien/vers/image.ext)
}

Arzou

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.

Levendivin

Auteur

@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 ?

popotte

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

<body>
    <section class="bg-home">
    </section>
</body>

Pour les autres pages

<body>
    <section class="bg-pages">
    </section>
</body>

Et le CSS

.bg-home {
    background-image: url('ton_image_d_accueil.png');
    height: 100%; // Pour recouvrir le body
}

.bg-pages {
    background-color: 'la_couleur_des_autres_pages';
    height: 100%; // Pour recouvrir le body
}

Quand tu mettra du PHP dans ton site tu pourras faire des classes dynamiques :p

Arzou

Merci Popotte, c'est ce que je voulais dire, mais en plus complet ;)

Levendivin

Auteur

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.

Arzou

Est ce que tu pourrais nous montrer un screenshot ? et comment tu l'as codé ?

Levendivin

Auteur

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="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>
</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;
}

Levendivin

Auteur

@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.

popotte

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

Levendivin

Auteur

(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. :)

popotte

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

Arzou

genre ? dans quelle situation ?

Levendivin

Auteur

Cela serait bien de savoir, mais en tout cas pour mon cas cela a marché, donc pas besoin de 2 fichiers CSS.

bezjosh99

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.

get-vidmateapp.com
get-mobdroapk.com

Une image de fond et une couleur au sein du même Site

15 réponses