Impossible de définir l'image de fond en css

Question

Je suis en train d'essayer de définir l'image de fond de ma page via CSS en utilisant le code suivant, mais aucune image n'apparaît. L'image sera tuilée sur la page et ne mesure que 10x10px. Pourtant, elle ne s'affiche toujours pas. Pouvez-vous me dire ce que je fais de mal?

#background {
background-image: url("img/background.png");
}

Answer 1

L'image se trouve-t-elle dans linkToCssFolder/img/background.png? Le chemin de l'image est relatif à votre fichier CSS.

De plus, est-ce que votre div #background contient du contenu? Sinon, elle aura probablement une hauteur par défaut de 0px et n'affichera aucun arrière-plan.

Answer 2

Vous devez également donner des dimensions à l'élément...

#background {
   width: 10px;
   height: 10px;
}

Les images d'arrière-plan ne font pas s'étirer leur conteneur pour s'adapter.

Answer 3

Voici une liste de tous les mots-clés CSS

J'ai juste essayé ceci sur http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple et ça marche.

Je suppose que votre image n'est pas au bon endroit ou que la propriété de fond est écrasée par un style ou une autre règle CSS.

Answer 4

Une chose si évidente en css et html est souvent oubliée même par les professionnels en raison d'un manque de concentration adéquate et simplement de fatigue. Si vous le saviez, reposez-vous un moment.

Voici quelques conseils si vous êtes perdu dans l'arbre du design web.

1. Vérifiez les fichiers s'ils sont présents, le type de fichier et la prise en charge du fichier dans vos navigateurs
2. Vérifiez le répertoire si vous êtes en ligne, vous pouvez mettre tous les URL du fichier OU utilisez "../" si votre css et le fichier image se trouvent à un niveau différent du répertoire.
3. Vérifiez votre syntaxe.
4. Reposez-vous, faites une sieste ou prenez une pause café.

Answer 5

Tout d'abord, vérifiez l'emplacement de votre CSS et de votre image 1) Si les deux se trouvent dans le même dossier, essayez simplement " background-image: url("background.jpg") ". 2) Si vous avez un dossier img et que l'image se trouve à l'intérieur, essayez " background-image: url("img/background.jpg"); ". 3) Si vous avez un dossier img et un dossier CSS, vous devez remonter d'un niveau, puis accéder au dossier image et choisir l'image, cela ressemblera à ceci : " background-image: url("../img/background.jpg"); " où '..' représente un pas en arrière