Partage

petit problème d'image de fond

24 juillet 2023 à 16:10:07

Bonjour

quelqu'un pourrais me dire ce que je dois faire pour mon image de fond.

En effet sur la page d'accueil pas de soucis, par contre sur la page prestations l'image de fait pas le fond correctement

merci

site

https://chantal-nails-beauty.fr/prestations.html#

code de la page prestations

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <title>Chantal Nails Beauty</title>
    
</head>
    <body>
                <header>
            <div class="logo">
                <img class="imgLogo" src="images/logo_slogan_pinceau_vernis_3.png" alt="logo Chantal Nails Beauty" id="logo">
                <P class="adresse"> 7 impasse des vergers 41500</P>
                 <P class="adresse"> LA CHAPELLE ST MARTIN EN PLAINE </P>
            </div>
  
            <div class="es1">
  
            <!-- nouveau menu -->
                <nav>
                     <ul id="menu-demo2">
                         <li><a href="#">accueil</a></li>
                        <li><a href="#">Prestations</a>
                        <ul>
                            <li><a href="#">semi-Permanent</a></li>
                            <li><a href="#">Nails ar</a></li>
                             <li><a href="#">Beauté des pieds</a></li>
                             <li><a href="#">Capsules</a></li>
                        </ul> 
                    </li>            
                            <li><a href="#">contact</a></li>
                     </ul>
                </nav>
            </div>
<!-- END nouveau menu -->
  
     <div class="social">
            <a href="#"><i class="fa-brands fa-facebook fa-2x" style="color:rgb(43, 9, 236)"></i></a>
            <a href="#"><i class="fa-brands fa-whatsapp fa-2x" style="color: darkgreen;" ></i></a>
            <a href="#"><i class="fa-brands fa-instagram fa-2x"></i></a>
     </div>
 
         
        </header>

    <figure>
         <img class="pap2" src="images/logo_chantal_papillon_seul.png" alt="papillon bleu seul">
    </figure>
    
        <div class="Prestations2">
             <p class="Prestations2">Mes Prestations</p>
        </div>
    

<div class="container">
    <div class="bg-secondary py-3 w-100">
    </div>
 </div>

    <main>
        <!-- Semi permanent -->
    <section class="py-5">
        <div class="container">
            <div class="row gy-4">
                <div class="col-12 col-md-6">
                    <h1>semi-permanent</h1>
                    <h2>Bienvenue dans mon univers créatif</h2>
                </div>
                <div class="col-12 col-md-6">
                    <img src="images/pause_vernis_2.jpg" id="permanent" alt="pose_vernis">
                 </div>
            </div>
         </div>
    </section>

    <div class="container">
        <div class="bg-secondary py-3 w-100">
        </div>
     </div>
    

    <!-- pose capsules -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="container">
                <div class="row gy-4">
                    <div class="col-12 col-md-6">
                        <h2>GEL et pose de Capsules </h2>
                        <h3>Pose mains/pieds</h3>
                        <h3>Dépose et pose</h3>
                        <h3>Pose mains/pieds</h3>
                        <h3>Dépose et soin</h3>
                    </div>
                     <div class="col-12 col-md-6">
                        <img src="images/capsules.jpg" id="Capsules" alt="ongles_avec_capsules">
                    </div>
                </div>
            </div>
        </div>
    </section>

        <div class="container">
            <div class="bg-secondary py-3 w-100">
            </div>
         </div>
    
         <!-- soins pieds -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="container">
                <div class="row gy-4">
                    <div class="col-12 col-md-6">
                        <h2>Soins détente pieds </h2>
                    </div>
                     <div class="col-12 col-md-6">
                        <img src="images/Beaute-des-pieds.jpg" id="Pieds" alt="massage pieds">
                    </div>
                </div>
            </div>
        </div>
    </section>



    
    

    <section class="py-5">
        <div class="container">
            <div class="row gy-4">
                <div class="col-12 col-md-6">
                    <h1>semi-permanent</h1>
                    <h2>Bienvenue dans mon univers créatif</h2>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <img src="images/pause_vernis_2.jpg" id="vernis" alt="semi-permanent">
            </div>
        </div>
    </section>
    
    
    
    </main>
    <footer class="border-top">
        <div class="container py-5">
            <div class="row gy-4">
                <div class="col-12 col-md-4">
                    <div class="bg-secondary py-5"></div>
                    </div>
                <div class="col-12 col-md-4">
                     <div class="bg-secondary py-5"></div>
                    </div>
                     <div class="col-12 col-md-4">
                        <div class="bg-secondary py-5"></div>
                        </div>
                    </div>
                </div>
    <!-- Script js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
    <script src="../js/script.js"></script>
    </footer>
    
</body>

</html>

mon code CSS

body{
    margin: 0;
    border: none;
    display: flex;
    flex-direction: column;
    background-color: rgba(235, 229, 209, 0.56);
    background-image: url(images/image_fond_aquarelle.jpg);
    background-size: cover;
    background-color: rgba(235, 229, 209, 0.56);
}
  
header{
    width: 100%;
    height: auto;
    background-image: url(images/image_fond_aquarelle.jpg);
    background-color: rgba(235, 229, 209, 0.56);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.logo{
    width: 250px;
    height: auto;
    margin-left: 10px;
    /*background-color: rgba(33, 163, 213, 0.72);*/
}

.social{
    margin-right: 10px;
}

.es1{
display: flex;
}
/* menue frog */
 
#menu-demo2, #menu-demo2 ul{
    padding:0;
    margin:0;
    list-style:none;
    text-align:center;
    }
    #menu-demo2 li{
    display:inline-block;
    position:relative;
    border-radius:8px;
    }
    #menu-demo2 ul li{
    display:inherit;
    border-radius:0;
    }
    #menu-demo2 ul li:hover{
    border-radius:0;
    }
    #menu-demo2 ul li:last-child{
    border-radius:0 0 8px 8px;
    }
    #menu-demo2 ul{
    position:absolute;
    z-index: 1000;
    max-height:0;
    left: 0;
    right: 0;
    overflow:hidden;
    -moz-transition: .8s all .3s;
    -webkit-transition: .8s all .3s;
    transition: .8s all .3s;
    }
    #menu-demo2 li:hover ul{
    max-height:15em;
    }
    /* background des liens menus */
    #menu-demo2 li:first-child{
    background-color: #65537A;
    background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);
    background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);
    }
    #menu-demo2 li:nth-child(2){
    background-color: #729EBF;
    background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
    background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
    }
    #menu-demo2 li:nth-child(3){
    background-color: #F6AD1A;
    background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
    background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
    }
    #menu-demo2 li:last-child{
    background-color: #CFFF6A;
    background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
    background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
    }
    /* background des liens sous menus */
    #menu-demo2 li:first-child li{
    background:#2A2333;
    }
    #menu-demo2 li:nth-child(2) li{
    background:#333A40;
    }
    #menu-demo2 li:nth-child(3) li{
    background:#9F391A;
    }
    #menu-demo2 li:last-child li{
    background:#677F35;
    }
    /* background des liens menus et sous menus au survol */
    #menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
    background:#65537A;
    }
    #menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
    background:#729EBF;
    }
    #menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
    background:#F6AD1A;
    }
    #menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
    background:#CFFF6A;
    }
    /* les a href */
    #menu-demo2 a{
    text-decoration:none;
    display:block;
    padding:8px 32px;
    color:#fff;
    font-family:arial;
    }
    #menu-demo2 ul a{
    padding:8px 0;
    }
    #menu-demo2 li:hover li a{
    color:#fff;
    text-transform:inherit;
    }
    #menu-demo2 li:hover a, #menu-demo2 li li:hover a{
    color:#000;
    }
     nav{
        margin-right: 10px;
     }
     .pap2 {
        width: 10%;
        margin: auto;
        display: block;
            }
    .accroche {
        font-size: 4em;
        color: black;
        font-family: 'Mrs Saint Delafield', sans-serif;
        position:relative;
        text-align: center;
     }
     
     .presentation {
        font-size: 2em;
        color: #000;
        font-family: 'moderne', sans-serif;
        position:relative;
        top: 5px;
        text-align: center;
     }

     .Prestations2 {
        font-size: 3em;
        color: black;
        font-family: 'Mrs Saint Delafield', sans-serif;
        position:relative;
        top: 5px;
        text-align: center;
        background-color: antiquewhite;
     }

     .container{
        background-color: antiquewhite;
     }

     .permanent {
        width: 90px;
        height: auto;
     }

    .Capsules {
        width: 90px;
        height: auto;
     }

     .Pieds {
        width: auto;
        height: auto;
     }

     .vernis {
        width: auto;
        height: auto;
     }

     .logo2 {
        width: 10%;
        margin-left: 1300px;
        display: block;
        top: 20px;
        background-color: #f3f0e5;

     }

merci pour votre attention

Lamecarlate

24 juillet 2023 à 16:19:23

Bonjour,

je vois que sur la page Prestations tu as chargé Bootstrap, mais pas sur la page d'accueil. Or, Bootstrap c'est un cadriciel (framework) CSS : c'est là pour servir de base de travail. Donc : si on l'utilise, c'est sur *toutes* les pages, et c'est surtout *avant* le style perso. Fais déjà ces modifications, cela harmonisera tes pages, et à ce moment-là on pourra se pencher sur le problème spécifique.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

fonfonsd

3 août 2023 à 14:30:56

Bonjour

bonjour @Lamecarlate

pour te dire que je t'ai écouté, j'ai refondu complètement ma page web en portefolio que j'ai effectué avec Bootstrap

voici ce que cela donne sur

https://www.chantal-nails-beauty.fr/

le code html

<!DOCTYPE html>
<html lang="fr">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chantal Nails Beauty</title>
        
  <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
             <script src="https://kit.fontawesome.com/14273d579a.js" crossorigin="anonymous"></script>   <!-- Font Awesome -->
</head>
 <body>
  <header class="py-4">
    <nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
     
      <div class="container">
        <a class="navbar-brand text-uppercase fw-bold" href="#">
          <span class="bg-primary bg-gradient p-1 rounded-3 text-light">Chantal_Nails_Beauty</span> 
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#chantal">Qui suis-je ?</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#Mes_prestations">Prestations</a>
            </li>
            
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <main>
  <section id="chantal" class="my-5">
    <div class="container">
       <div class="row gy-4 align-items-center">
          <div class="col-12 col-md-6"> <!-- 12 colonnes sur petit ecran et 6 sur 12 à partir moyen-->
               <h1 class="fw-bold"> Votre prothesiste ongulaire dans le loir et cher <br> A propos de moi :</h1>
               <h2 class="fw-light">Je me présente, je m’appelle Chantal et je suis prothésiste ongulaire.<br> J’ai créé Chantal Nails Beauty pour embellir vos ongles
                et vous offrir un moment de détente,<br> loin du stress de votre quotidien. La qualité de votre manucure et votre bien-être<br>
                 sont mes deux seules préoccupations. Pour cela, je vous accueille dans un endroit cosy,<br> situé à LA CHAPELLE ST MARTIN, près de blois.
                 </h2>  
               <a href="#expertise" class="btn btn-primary mt-5">Mes réalisations</a>   
          </div>   
          <div class="col-12 col-md-6">
            <img src="images/logo_chantal_papillon_seul.png" alt="logo_chantal_papillon_seul" width="50%">
          </div>
       </div>
    </div>
  </section>
    <!-- END portefolio -->

      <section id="Mes_prestations" class="py-5"> 
        <div class="container">
          <h2 class="mb-0">Mes prestations</h2>
          <h3 class="fw-light fs-5">Pour un moment de plaisir et de détente</h3>
          <div class="row gy-4 gy-md-0 mt-4">
              <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                  <div class="card">
                      <img src="images/pause_vernis_2.jpg" class="card-img-top" alt="...">
                      <div class="card-body">
                          <h5 class="card-title">Vernis semi-permanent</h5>
                          <p class="card-text">Un choix de couleur pour tout les goûts et toutes les saisons<br> Pose semi-permanent : <b>20€</b><br>Dépose semi-permanent : <b>10€</b></p>
                      </div>
                  </div>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                  <div class="card">
                      <img src="images/capsule.jpeg" class="card-img-top" alt="...">
                      <div class="card-body">
                          <h5 class="card-title">Allongement</h5>
                          <p class="card-text">Pose CAPSULES ou CHABLONS avec couleur : <b>30€</b><br> Renforcement en gel sur Ongles naturels : <b>35€</b><br>Remplissage entretien du gel : <b>30€</b> <br> Dépose complete : Tarif : <b>20€</b></p>
                      </div>
                  </div>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                  <div class="card">
                      <img src="images/Beaute-des-pieds.jpg" class="card-img-top" alt="...">
                      <div class="card-body">
                          <h5 class="card-title">Beauté pieds</h5>
                          <p class="card-text">Soins détente pieds<br>Pose de vernis<br>Tarif : <b>25€</b></p>
                      </div>
                  </div>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                  <div class="card">
                      <img src="images/vernis_tache.jpeg" class="card-img-top" alt="...">
                      <div class="card-body">
                          <h5 class="card-title">Décorations</h5>
                          <p class="card-text">Décorations simple : <b>OFFERTE</b><br> Décorations nail art par ongle : <b>1€</b></p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      </section>

      <section id="contact" class="py-5 bg-light">
        <div class="container">
            <h2 class="mb-0">Un projet ?</h2>
            <h3 class="fw-light fs-5">Prenez contact avec moi</h3>

            <div class="row gy-4 mt-4">
                <div class="col-12 col-md-5">
                    <img src="images/contact.jpg" alt="Image boite de vernis" width="100%">
                </div>
                <div class="col-12 offset-md-1 col-md-6">
                      <form action="" class="row gy-4">
                        <div class="col-6">
                          <label for="prenom" class="form-label">Prenom</label>
                          <input type="text" class="form-control" name="prenom" id="prenom">
                        </div>
                        <div class="col-6">
                          <label for="Nom" class="form-label">Nom</label>
                          <input type="text" class="form-control" name="Nom" id="Nom">
                        </div>
                        <div class="col-6">
                          <label for="Tel" class="form-label">Tel :</label>
                          <input type="text" class="form-control" name="Tel" id="Tel">
                        </div>
                        <div class="col-12">
                          <label for="email" class="form-label">Email</label>
                          <input type="text" class="form-control" name="email" id="email">
                        </div>
                        <div class="col-12">
                          <label for="Message" class="form-label">Message</label>
                          <textarea name="message" id="Message"  rows="3" class="form-control"></textarea>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary w-100">Envoyer</button>
                        </div>
                      </form>
                    
                    </div>
                </div>
            </div>
        </div>
    </section>
  
    </main>
    <footer class="border-top">
      <div class="container py-5">
        <div class="row gy-4 align-items-center">
          <div class="col-12 col-md-4">
            <a class="navbar-brand text-dark text-uppercase fw-bold" href="#">
              <span class="bg-primary bg-gradient p-1 rounded-3 text-light">Chantal_Nails_Beauty</span>
            </a>
          </div>
          <div class="col-12 col-md-4 text-md-center">
            <ul class="list-unstyled mb-0">
              <li>
                <a href="#" class="text-decoration-none text-dark">Mentions légales</a>
              </li>
            </ul>
          </div>
          <div class="col-12 col-md-4 text-md-end">
            <ul class="list-inline mb-0">
              <li class="list-inline-item">
                <a href="#" class="text-decoration-none text-dark"><i class="bi bi-messenger fa-2x"></i></a>
              </li>
              <li class="list-inline-item">
                <a href="#" class="text-decoration-none text-dark"><i class="bi bi-instagram fa-2x"></i></a>
              </li>
              <li class="list-inline-item">
                <a href="#" class="text-decoration-none text-dark"><i class="bi bi-whatsapp fa-2x"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
              integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
              crossorigin="anonymous"></script>
    </footer>
  </body>
  
  </html>

maintenant parcontre je voulais mettre un logo ; qui s'ajuste suivant taille écran ; en haut à gauche mais je ne trouve pas

merci

Lamecarlate

3 août 2023 à 16:24:16

Eh bien beau boulot !

Pour ton problème : as-tu la documentation de Bootstrap sur le sujet : Navbar - Bootstrap ? Ensuite, pour que ton image s'adapte, normalement max-width: 100% sur l'image elle-même devrait suffire.

À noter que le papillon ne devrait probablement pas être dans le html (en tout cas pas avec ce alt pas du tout descriptif ), si c'est de la décoration c'est dans le css.

-
Edité par Lamecarlate 3 août 2023 à 16:26:34

Pas d'aide concernant le code par MP, le forum est là pour ça :)

AbcAbc6

3 août 2023 à 22:13:40

Bonsoir, en plus de ce qu'a dit mon VDD :

Les titres sont à revoir : "A propos de moi" ne devrais pas être dans le h1, c'est deux idées différentes donc pas dans le même block.

"Je me présente, ..... " ce n'est pas un titre mais un paragraphe.

On ne saute pas des niveaux de titre, vous avez des h5 mais aucun h4!!

Voici une capture écran de votre hiérarchie de titre actuel :

Pour quelle raison trois petits points dans le alt des images???? Cet attribut est fait pour accueillir une description textuelle des images, visible par les moteurs de recherche mais également par les personnes qui n'affiche pas les images ou qui ne le peuvent de part leur handicap.

Lire : http://www.pompage.net/traduction/Bien-utiliser-le-texte-alternatif

fonfonsd

8 août 2023 à 16:04:37

Bonjour

pour les trois petits points sur image, un oubli de ma part dans mon élan

pour H4 H5 c'est fait j'ai modifié mes H5 en H4

merci