Problème Background-Image Section

Le problème exposé dans ce sujet a été résolu.

Bonjour,

Voilà je suis débutant en html/css et je suis bloqué sur mon premier projet au niveau d’une image de fond qui ne veut pas remplir la section entière.

Voici mon code CSS:

*{
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: 'qintounregular';
    src: url('./fonts/qintoun-webfont.woff2') format('woff2'),
         url('./fonts/qintoun-webfont.woff') format('woff'),
         url('./fonts/qintoun.ttf');
    font-weight: normal;
    font-style: normal;

}
h1{
    color: rgba(110,57,255,0.5);
    font-size: 24px;
    font-family: qintounregular;
}
h2{
    color: black;
}
h3{
    color: black;
}
a{
    color: white;
    padding: 20px;
}
a:hover{
    color: red;
}

section{
    background: url('images/fond.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}
nav{
    background: rgba(0,0,0,0.5);
    text-align: center;
    padding: 20px;
}
#bandeau{
    margin-top: 10%; /*la propriété margin permet d'espacer les DIV entre elles*/
    margin-bottom: 10%;
    background-color: rgba(255,255,255,0.5);
}
#contenu{
    text-align: center;
    padding: 2%;
}

la partie du code section me semble, j’imagine, celle qui pose problème. Le résultat est que j’ai un bandeau blanc sous a DIV #bandeau alors que c’est censé être encore l’image de fond à cette emplacement.

Merci de votre aide.

+0 -0

Salut,

J’ai l’impression que le soucis vient du margin-bottom de #bandeau qu’il faudrait remplacer par un padding-bottom. margin correspond à une marge extérieure donc le fond est celui de l’élément parent de #bandeau tandis que padding est une marge intérieure donc le fond est le même que #bandeau. Si ce n’est pas ça le soucis, il serait bien que tu nous donnes le code HTML qui va avec pour être en mesure de tester l’ensemble !

+1 -0

Salut,

J’ai l’impression que le soucis vient du margin-bottom de #bandeau qu’il faudrait remplacer par un padding-bottom. margin correspond à une marge extérieure donc le fond est celui de l’élément parent de #bandeau tandis que padding est une marge intérieure donc le fond est le même que #bandeau. Si ce n’est pas ça le soucis, il serait bien que tu nous donnes le code HTML qui va avec pour être en mesure de tester l’ensemble !

Situphen

Salut, merci pour ta réponse.

oui bien sûr, voici la page html:

`<html>

<head>
    <title>Projet 1 Théo</title>
    <meta name="description" content="ma première page web" />
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <section>
        <nav>
            <a href="http://www.linkefin.fr" target="_blank">LinkedIn</a>
            <a href="Mon entreprise.fr" target="_blank">Mon entreprise</a>
            <a href="CV.pdf" target="_blank">Mon CV</a>
        </nav>
    <div id="bandeau">
        <div id="contenu">
            <img src="scarabélogo.png" width="100"/>
            <h1>Théo REVEAU</h1>
            <h2>site test</h2>
            <h3>arinfo</h3>
            <br></br>
            <a href="mailto:theo.reveau.85@gmail.com">Contactez-moi</a>
        </div>
    </div>
    </section>
</body>

</html>`

cependant j’ai essayé de changer en padding bottom mais du coup la DIV bandeau est agrandi. Moi je veux seulement afficher la section sous le bandeau.

Sinon tu peux appliquer le fond directement à l’élément parent (je suppose body) pour qu’il apparaisse derrière l’ensemble des enfants (les section). :)

viki53

Merci! tout simplement cela a fonctionné. Je trouve cela illogique que cela ne fonctionne pas avec section pourrais-tu m’expliquer la raison STP ? en tout cas le résultat voulu est bien là merci.

+0 -0

Comme l’a expliqué Situphen, margin c’est la marge extérieure et padding la marge intérieure de ton élément.

Le fond s’applique jusqu’à la bordure, il s’arrête donc avant la marge extérieure mais après la marge intérieure.

Tu peux jouer avec les DevTools (Clic droit > Inspecter l’élément) pour voir à quoi ça ressemble sous le capot. ;)

+1 -0

Je comprends vos explications par rapport à padding et margin mais je veux bien une marge extérieure entre mon bandeau et la section à propos qui viens à la suite. la background image est rattachée à la section hero ,malheureusement le problème n’est pas réglé puisque j’ai continué le projet mais je ne peux pas laisser la background image rattachée à body puisque j’ajoute d’autres DIV dessous cette-ci.

Je ne comprends pas je suis perplexe…

<body>
        <section id="hero">
            <nav>
                <a href="http://www.linkefin.fr" target="_blank">LinkedIn</a>
                <a href="Mon entreprise.fr" target="_blank">Mon entreprise</a>
                <a href="CV.pdf" target="_blank">Mon CV</a>
            </nav>
        <div id="bandeau">
            <div id="contenu">
                <img src="scarabélogo.png" width="100"/>
                <h1>Théo REVEAU</h1>
                <h2>site test</h2>
                <h3>arinfo</h3>
                <br></br>
                <a href="mailto:theo.reveau.85@gmail.com">Contactez-moi</a>
            </div>
        </div>
        </section>
        <section id="apropos">
            <div id="apropos_image">
                <img src="images/photographe.jpg"/>

voici le CSS

*{
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: 'qintounregular'; /*je dois charger les fichiers sur fontsquirrel.com pour que tout les navigateurs puissent lire cette police*/
    src: url('./fonts/qintoun-webfont.woff2') format('woff2'),
         url('./fonts/qintoun-webfont.woff') format('woff'),
         url('./fonts/qintoun.ttf');
    font-weight: normal;
    font-style: normal;

}
html{
    font-family: 'arial';
    font-size: 16px;
}
h1{
    color: black; /*trouver des associations de couleurs et les valeurs rgb sur adobe couleur CC*/ 
    font-size: 26px; /*taille de police*/
    font-family: qintounregular; /*style de police*/
}
h2{
    color: black;
}
h3{
    color: black;
}
a{ /* le a correspond aus liens (a de <a href>)*/
    color: white;
    text-decoration: none;
    padding: 5px; /* la propriété padding permet d'espacer le contenu à l'intérieur de la DIV*/
}
a:hover{
    color: red;
}

#hero{
    background: url('images/fond.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}
nav{
    background: rgba(0,0,0,0.5);
    text-align: center;
    padding: 20px;
}
#bandeau{
    margin-top: 10%; /*la propriété margin permet d'espacer les DIV entre elles*/
    margin-bottom: 10%;
    background-color: rgba(255,255,255,0.5);
}
#contenu{
    text-align: center;
    padding: 8%;
}
#contenu a{
    color: red;
    font-family: 'qintounregular';
    background-color: rgba(255,255,255,0.5);
    border: 1px solid red;
    border-radius: 15px;
    padding: 20px;
    transition: ease 1s; /*effet de transition au survol du bouton*/
}
#contenu a:hover{
    color: white;
    background-color: rgba(178,32,19,0.8);
}
#contenu img:hover{
    transform: rotate(90deg); /* quand je passe sur le logo, celui-ci fait une rotation de 90 degrés*/
    transition: 0.2s;
}
#apropos{
    display: flex;
}
#apropos_image img{
    flex:1;
    max-width: 100%; /* la place maximum que prend l'image dans son contenant*/
}
#apropos_texte{
    flex:2;
}
+0 -0

As-tu essayé l’appliquer ton margin-bottom à #hero ?

viki53

Oui viki53, le résultat est exactement le même, une barre blanche. Serais-ce un problème de lecture du navigateur? Je ne trouves pas de logique.

J’ai édité mon message. En fait j’ai essayé d’appliquer padding-bottom à #hero et là cela fonctionne.

Merci beaucoup pour vos réponses en tout cas!!!

+0 -0

Non, c’est juste que ta marge est à l’extérieur de l’élément encore une fois.

Tu pourrais nous partager ton code sur https://codepen.io/ par exemple pour que l’on ait la même base ?

[EDIT] : Essaye d’appliquer un overflow: hidden; à #hero pour forcer la marge de #bandeau à ne pas dépasser ? https://codepen.io/viki53/pen/MWjLrvM

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte