Image de background site web

Résolu/Fermé
mister buzz Messages postés 238 Date d'inscription jeudi 30 octobre 2008 Statut Membre Dernière intervention 2 février 2016 - 2 janv. 2014 à 17:11
mister buzz Messages postés 238 Date d'inscription jeudi 30 octobre 2008 Statut Membre Dernière intervention 2 février 2016 - 4 janv. 2014 à 19:47
Bonjour et bonne année à toutes et tous,
J'ai un petit problème avec le fond d'image de mon site.
Avec le code ci-dessous j'ai réussit à mettre parfaitement mon image. Le problème est que si je réduit la fenêtre de mon navigateur, l'image de fond rétrécie avec et finit par laisser de grands espaces vides.

body{ background-image:url(images/Background.jpg); margin:0;background-size:100%; background-attachment:fixed; background-repeat:no-repeat;}

Comment faire pour que l'image de fond reste statique malgré la réduction de la fenêtre?
A voir également:

1 réponse

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
3 janv. 2014 à 00:45
Salut

tu ne mets pas background-size mais en réduisant l'image sera rognée et la taille du body ne doit pas être supérieur à l'image

ou background-size:cover; ou background-size:cover; l'image s'adapte


1
mister buzz Messages postés 238 Date d'inscription jeudi 30 octobre 2008 Statut Membre Dernière intervention 2 février 2016 1
3 janv. 2014 à 17:05
Merci, ça marche bien.
Par contre j'ai le même problème avec mon header et les éléments qui s'y trouvent (menu en html). En réduisant la fenêtre les éléments se posent les uns sur les autres, tu peux me dire comment faire pour qu'ils restent figer sur le header ?
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
3 janv. 2014 à 21:55
la c'est normal en fait si le height de ton header est en px fait cela pour le header

header {
min-height: la hauteur de ton background ou menu en PX;
height:: auto;
background-size:cover;
......etc....
}

ou bien dans body tu fais
body {
width: le pourcentage que tu veux;
min-width: largeur en pixel avant laquelle il y a chevauchement;
...etc...
}

regarde laquelle des solutions convient le mieux

min- veux dire jamais plus petit que
il y a aussi
max- jamais plus grand que
0
mister buzz Messages postés 238 Date d'inscription jeudi 30 octobre 2008 Statut Membre Dernière intervention 2 février 2016 1
4 janv. 2014 à 19:47
Un gros merci, c'est vraiment ça que je voulais. Bon weekend.
0