web-dev-qa-db-fra.com

background-image: url ("images/plaid.jpg") non répétée; ne se présentera pas

Je n'arrive pas à faire de mon plaid.jpg le fond de l'une de mes pages, et encore moins de toutes les pages. J'ai essayé de le sélectionner par body, html, *, l'identifiant spécifique de "home". rien ne fonctionne. L'image est de 300 x 421 pixels. Je n'en ai pas besoin pour être jolie, je veux juste que ça arrive, derrière tout. comment mon css chercherait-il cela? l'image plaid.jpg se trouve dans mon dossier images dans le même répertoire que mon fichier index.html. Ce lien se trouve en haut de mon fichier index.html. et ma feuille de style se trouve dans le dossier mes feuilles de style nommé mystyles.css.

<link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css">

J'ai essayé de modifier mon fichier .CSS de toutes les manières imaginables à mon avis. les 30 premiers résultats Google pour "l'image d'arrière-plan ne s'affiche pas" et aucun n'a fonctionné. Je suis conscient que c'est probablement quelque chose de simple.

mystyles.css dans sa forme la plus élémentaire 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 -->

cela n'a pas réussi

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 rel="stylesheet" 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>
jquerycssbackgroundstylesheet
7
codey b

Vous utilisez soit:

background-image: url("images/plaid.jpg");
background-repeat: no-repeat;

... ou

background: transparent url("images/plaid.jpg") top left no-repeat;

... mais définitivement pas

background-image: url("images/plaid.jpg") no-repeat;

EDIT: Démo sur JSFIDDLE en utilisant des chemins absolus (au cas où vous auriez du mal à vous référer aux images avec des chemins relatifs).

17
JFK

Le plus important

N'oubliez pas que les URL relatives sont résolues à partir de l'URL de votre feuille de style.

Cela fonctionnera donc si le dossier images se trouve dans le dossier stylesheets.

À partir de votre description, vous devez le changer en

url("../images/plaid.jpg")

ou

url("/images/plaid.jpg")

Supplémentaire 1

Aussi, vous ne pouvez pas avoir de sélecteur .. 

CSS est appliqué via les sélecteurs ..

Supplémentaire 2

Vous devez utiliser soit le raccourci background pour transmettre plusieurs valeurs comme celle-ci.

background: url("../images/plaid.jpg") no-repeat;

ou la syntaxe détaillée de la spécification de chaque propriété seule

background-image: url("../images/plaid.jpg");
background-repeat:no-repeat;
4
Gabriele Petrioli

Si c'est vraiment tout ce qui se trouve 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:

body {
    background-image: url(...);
}
3
duskwuff

Essaye ça:

body
{ 
    background:url("images/plaid.jpg") no-repeat fixed center;
}

exemple jsfiddle: http://jsfiddle.net/Q9Zfa/

3
Sean Keating

Vous pouvez déboguer de deux manières:

  1. Presse CTRL+U pour voir la page Source. presse CTRL+F pour trouver "mystyles.css" dans le source. Cliquez sur le lien mystyles.css et vérifiez s'il ne montre pas "404 non trouvé".

  2. Vous pouvez INSPECTER ELEMENT DANS FIRBUG et définir le chemin d'accès à Image, Définir la hauteur et la largeur de l'image car parfois, l'image ne s'affiche pas.

J'espère que cela peut fonctionner!.

1
Surinder ツ
    <style>
    background: url(images/Untitled-2.fw.png);
background-repeat:no-repeat;
background-position:center;
background-size: cover;
    </style>
0
Raimac