Probleme background site Html et Css

Galmadus Messages postés 3 Statut Membre -  
Galmadus Messages postés 3 Statut Membre -
Bonjour à tous !!

Je viens de passer mon après-midi a chercher comment mettre un background sur un site de façon a ce que celui-ci reste fixe et qu'il prenne tout le fond de la page ...

Au début l'image était en mosaïque seulement tout en haut ensuite je l'ai mis seul et au centre (toujours en haut) mais elle ne prenait pas toute la hauteur ...
J'en ai conclus que j'étais dans l'en-tête

Dans la partie CSS j'ai mis :
 
.body {
    background: url("http:/.image.jpg");
 	background-attachment: fixed;
        }


Et dans la partie Html :
<div id="pages">
<div style="background:url(http://image.jpg)" "no-repeat" ; "width: 1345px; height: 2000px" ; "position: fixed" "align:center"/>


mais la l'image est en mosaïque sur tout le fond de la page mais pas seul ...

Je travail sur over.blog, je modifie le "Thème" directement dans la partie Editer </>
Là où se trouve toute la partie codage
Mon image est au dimension 800x534 (si l'image est trop petite et est flou, ce n'est pas grave je la changerais plus tard une fois le problème résolu :)

Merci d'avance pour l'aide que vous m'apporterez !
Bonne soirée / Bonne journée
A voir également:

1 réponse

[Dal] Messages postés 6373 Statut Contributeur 1 106
 
Salut,

Plusieurs façons de faire, dont une avec CSS3, pas forcément supportée partout et une avec un div jouant sur z-index contenant l'image.

https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only

https://www.w3schools.com/cssref/css3_pr_background-size.asp


Dal
1
Galmadus Messages postés 3 Statut Membre
 
Merci pour le lien, j'ai réussi !

j'ai mis dans le css :
        #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}


et dans le html :
<div id="background">
    <img src="http://image.noelshack.com/fichiers/2015/43/1445345271-img-2494.jpg" class="stretch" alt="" />
</div>


Mais j'avoue ne pas comprendre pourquoi cela fonctionnne x)
0