Sujet Précédent Sujet Suivant

Probleme background site Html et Css

Fermé
Galmadus Messages postés 2 Date d'inscription mardi 20 octobre 2015 Statut Membre Dernière intervention 20 octobre 2015 - 20 oct. 2015 à 19:26
Galmadus Messages postés 2 Date d'inscription mardi 20 octobre 2015 Statut Membre Dernière intervention 20 octobre 2015 - 20 oct. 2015 à 20:32
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

Réponse 1 / 1
[Dal] Messages postés 6204 Date d'inscription mercredi 15 septembre 2004 Statut Contributeur Dernière intervention 27 février 2025 1 101
20 oct. 2015 à 19:49
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 2 Date d'inscription mardi 20 octobre 2015 Statut Membre Dernière intervention 20 octobre 2015
20 oct. 2015 à 20:32
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

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Coco chat connexion sur mobile, le tchat est fermé ?
Pisceneo -
brucine -

24 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses