background-image: url(“images/plaid.jpg”) no-repeat; l'habitude de se présenter
Je n'arrive pas à faire mon plaid.jpg l'arrière-plan sur une de mes pages, sans parler de tous d'entre eux, j'ai essayé en sélectionnant par corps, html, *, l'id spécifique de la "maison". rien ne fonctionne. L'image est de 300 x 421 pixels. Je n'ai pas besoin de montrer assez, j'ai juste envie de se montrer, derrière tout. comment mes css look pour cela? l'plaid.jpg l'image est dans mon dossier images dans le même répertoire que mon index.html fichier. Ce lien est au dessus de mes index.html fichier. et ma feuille de style est dans mes feuilles de style dossier nommé mystyles.css.
<link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css">
J'ai essayé de modifier mon .Fichier CSS tous les moyens imaginables, à mon avis. les 30 premiers résultats de google pour "background-image ne s'affiche pas" et aucune n'a fonctionné. Je suis conscient que c'est probablement quelque chose de simple.
mystyles.css dans sa forme la plus basique, sans sélecteur.
background-image: url("images/plaid.jpg") no-repeat;
index.html
<body>
<!-- Page: home -->
<div id="home"
data-role="page"
data-title="Home">
<div data-role="header"
data-position="fixed"
data-theme="b">
<h1>Home</h1>
<a href="#info"
data-icon="info"
data-iconpos="notext"
data-rel="dialog"
class="ui-btn-right"
>Info</a>
</div><!-- header -->
<div data-role="content">
<div data-role="controlgroup" data-theme="e">
<a href="#blog"
data-role="button"
data-icon="arrow-r"
data-theme="e"
>Blog</a>
<a href="#videos"
data-role="button"
data-icon="arrow-r"
data-theme="e"
>Videos</a>
<a href="#photos"
data-role="button"
data-icon="arrow-r"
data-theme="e"
>Photos</a>
<a href="#tweets"
data-role="button"
data-icon="arrow-r"
data-theme="e"
>Tweets</a>
</div><!-- links -->
</div> <!-- content -->
</div><!-- page -->
ce n'était pas couronnée de succès,
body {
background-image: url("/images/plaid.jpg");
background-repeat: no-repeat;
}
c'est ce qui est dans mon aussi
<head>
<meta charset="utf-8" />
<title>Mob App</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!--<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />-->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="javascripts/myscript.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css" />
</head>
Si votre CSS ne fonctionne pas, assurez-vous que votre HTML et CSS est valide.
aucune erreur dans la console. et quand je l'affichage de la source, il voit ma .fichier css de sorte que son lié correctement.
La vérification de la console n'est pas la même que la validation.
Vous savez ce qui serait drôle? Si l'image d'arrière-plan est chargement, mais vous ne pouvez pas le voir parce que le
body
s'est totalement effondrée parce que tous ses enfants sont flottante (sans clearfix) ou en position absolue. Tout les questions. Couper tous les détails qui ne regardent pas comme ils font partie du problème jusqu'à ce que vous trouver. C'est la façon dont vous déboguez des choses.
OriginalL'auteur codey b | 2012-12-19
Vous devez vous connecter pour publier un commentaire.
Soit vous l'utilisez :
... ou
... mais définitivement pas
MODIFIER : Démo à JSFIDDLE à l'aide des chemins absolus (dans le cas où vous avez des ennuis en se référant à vos images avec des chemins relatifs).
background-color
etbackground-position
sont complètement optionnels (transparent
ettop left
sont les valeurs de ces propriétés, si non spécifié)d'accord. Je voulais juste illustrer le plein d'abréviation de la propriété.
Je leur ai donné les deux d'un coup, sans succès. et une autre affiche a dit de ne pas utiliser les url("images/plaid.jpg") mais plutôt url("/images/plaid.jpg") j'ai essayé ces moyens, s'élevant à 4 variations. Je ne sais pas quoi croire, mes plaid.jpg fichier dans mon dossier images dans le répertoire racine, aka même endroit que mon index.html et mon .le fichier css est dans mes feuilles de style dossier dans le même répertoire racine. de sorte que son lié et voit le fichier, refuse juste d'obéir à la sélection et le style. j'ai aussi essayé de mettre la plaid.jpg fichier dans le dossier et les feuilles de style en changeant le chemin d'accès dans le .fichier css
Assurez-vous de savoir exactement où vos images sont, sinon utiliser des chemins absolus. par exemple
J'ai utilisé le chemin d'accès absolu, sans succès "mywebsite.com/images/plaid.jpg" Il montre l'image si je l'ai mis dans le navigateur, mais il ne montrons que l'image comme arrière-plan lorsque j'utilise le chemin d'accès absolu pour l'emplacement de mon image de fond.
OriginalL'auteur JFK
Plus important
Gardez à l'esprit que les Url relatives sont résolus, à partir de l'URL de votre feuille de style.
Si cela ne fonctionne pas si le dossier
images
est à l'intérieur de lastylesheets
dossier.De vous description vous auriez besoin de le modifier, soit de
ou
Supplémentaires 1
Aussi, vous ne avez pas de sélecteur..
CSS est appliqué par le biais de sélecteurs..
Supplémentaire de 2
Vous devez utiliser le raccourci
background
pour passer plusieurs valeurs de ce typeou détaillé de la syntaxe de spécification de chaque propriété sur son propre
aussi, j'ai utiliser des sélecteurs je juste n'ai pas inclure tout parce que j'ai utilisé 15-20, et il wouldnt être important d'écrire toutes les variations. corps ou html devrait fonctionner comme un sélecteur dans sa forme la plus générale, mais je ne sais pas comment il sait que leurs dimensions. J'ai aussi mis le plaid.jpg fichier à l'intérieur de mes feuilles de style dossier et modifié le chemin d'accès à /stylesheets/plaid.jpg et ça n'a pas fonctionné non plus. il ne serait pas me laisser éditer mon post précédent
quand vous donnez un exceptionnellement incomplète de l'échantillon, tout le monde va s'attendre au pire (surtout quand tu dis aucun sélecteur). Nous avons besoin de assez pour savoir que vous ne faites pas complètement tort.
OriginalL'auteur Gabriele Petrioli
Si c'est vraiment tout ce qui est dans votre fichier CSS, alors oui, rien ne se passera. Vous avez besoin d'un sélecteur, même si c'est aussi simple que
body
:OriginalL'auteur duskwuff
Essayez ceci:
jsfiddle exemple: http://jsfiddle.net/Q9Zfa/
OriginalL'auteur Sean Keating
Vous pouvez débogage à l'aide de deux façons:
Appuyez sur CTRL+U pour afficher la Source de la page . Appuyez sur la touche CTRL+F pour trouver "mystyles.css" dans la source .
cliquez sur mystyles.lien css et vérifier si elle n'est pas en montrant "404 not found".
Vous pouvez INSPECTER l'ÉLÉMENT DANS FIRBUG et de définir le chemin d'accès à l'Image ,Réglez la hauteur de l'Image et de la largeur car parfois, l'image ne marche pas apparaître.
Espère que cela peut marche!!!!.
la première technique est de débogage si votre mystyles.css est inclus ou pas avec chemin d'accès correct. vous devez essayer deuxième technique qui est rapide. Vous pouvez définir le chemin d'accès à l'Image ,Réglez la hauteur de l'Image et la largeur de frebug.
OriginalL'auteur Surinder ツ
OriginalL'auteur Raimac