Adapter une background image à la taille de l'écran

Par Axel - Valkyri0s, il y a 11 ans

Les bases HTML/CSS

Bonjour,
Je suis en galère avec cette image de background qui ne veut pas se mettre à la taille de l'écran sans que la div soit remplis de texte et/ou de <br>. J'aimerai que l'image soit comme sur ce site.
Merci d'avance pour toute suggestion.
Pour le moment ça me donne ça

Voici le code html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf8">
        <meta name="description" content="">
        <meta name="author" content="">
        <title> Lorem ipsum | Une aventure exeptionnel</title>
        <!-- CSS -->
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="home">
            <h1>"Un monde immense à explorer"</h1>
        </div>
    </body>
</html>

et le css 

#home{
                    max-width: 100%;
                    height: auto;
                    background-image: url("images/1.jpg");
                    background-size: cover;
                }

3 réponses

coloo, il y a 11 ans

si tu inspecte ton site "d'inspiration" tu vois ceci :

<div class="slide" id="home" data-slide="home" data-stellar-background-ratio="0.5" style="background-position: 0% 0px;">
  </div>

#home {
background-image: url('../images/home/home_lower.jpg');
background-color: #F3F3F3;
}
.slide {
background-attachment: fixed;
background-size: 100%;
width: 100%;
height: 100%;
position: relative;
min-height: 620px;
background-repeat: no-repeat;
}

Je te laisse en tirer tes propres conclusions.

++

Axel - Valkyri0s, il y a 11 ans

@coloo J'ai recopié le code mais le background se met à la taille minimum ce qui laisse un espace blanc sur mon écran. J'aimerai que la photo prenne réellement tout l'écran..

Axel - Valkyri0s, il y a 11 ans

J'ai trouvé la solution tout seul. Il faut, pour que le div fasse 100% et donc l'image aussi, mettre body et html a 100%. (d'après cet article.

Voici aussi mon css pour vous aider:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,nlockquote,th,td { margin:0; padding:0;}
table{ border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,var {font-style:normal; font-weight:normal;}
q:before,q:after{ content:'';}
abbr,acronym{border: 0;}
body{background: white repeat; font-family: Arial, Verdana, sans-serif; font-size:20px; color:black; height: 100%}
a{color:#0072bc; cursor:pointer; text-decoration:none; padding-bottom: 15px;}
html{height: 100%;}
h1{
    text-align: center;
}
.slide{
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height:100%;
    position: relative;
    min-height: 620px;
    background-repeat: no-repeat;
}
#home{
    background-image: url("images/1.jpg");
    background-color: #f3f3f3;
    background-size: cover;
}
#project{
    background-image: url("images/2.jpg");
    background-color: #f3f3f3;
    background-size: cover;
}

Bon courage a tous