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

Non riesco a rendere il mio plaid.jpg lo sfondo su nessuna delle mie pagine, per non parlare di tutti loro, ho provato a selezionarlo per corpo, html, *, l'identificativo specifico di "home" . niente funziona. L'immagine è di 300 x 421 pixel. Non ho bisogno di mostrarlo bello, voglio solo che si mostri, dietro tutto. come potrebbe il mio css cercare questo? l'immagine plaid.jpg è nella mia cartella immagini nella stessa directory del mio file index.html. Questo link è nella parte superiore del mio file index.html. e il mio foglio di stile si trova nella mia cartella di fogli di stile denominata mystyles.css.background-image: url ("images/plaid.jpg") no-repeat; non presenterò

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

Ho provato a modificare il mio file .CSS in ogni modo immaginabile secondo me. i primi 30 risultati di google per "background-image not show up" e nessuno ha funzionato. Sono consapevole che probabilmente è qualcosa di semplice.

mystyles.css nella sua forma più semplice senza selettore.

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 -->

questo non era successo

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

questo è che cosa è in mia anche

<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>

fonte

2012-12-19 codey b

Qualcosa nella console del browser? – Wiz

Se il tuo CSS non funziona, controlla che il tuo HTML * e * CSS sia valido. – cimmanon

nessun errore nella console. e quando guardo la fonte, vede il mio file .css in modo che sia collegato correttamente. –

Si sia uso:

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

. .. o

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

... ma definitivamente non

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

EDIT: Demo in JSFIDDLE utilizzando percorsi assoluti (nel caso abbiate problemi con riferimento alle immagini con percorsi relativi).

fonte

2012-12-19 03:40:09 JFK

'background-color' e' background-position' sono completamente opzionali ('transparent' e' top left' sono i valori per queste proprietà se non specificato) – cimmanon

@cimmanon: agree. Volevo solo illustrare la piena proprietà stenografica. – JFK

Ho dato a entrambi un colpo senza successo. e un altro poster ha detto di non usare url ("images/plaid.jpg") ma piuttosto url ("/ images/plaid.jpg ") Ho provato in questi modi, ammontando a 4 variazioni.Non so cosa credere, però, il mio file plaid.jpg nella cartella delle mie immagini nella directory root, alias stesso posto del mio index.html, e il mio file .css è nella cartella dei miei fogli di stile nella stessa directory radice, quindi è collegato e vede il file, si rifiuta semplicemente di obbedire al selettore e allo stile.Ho anche provato a mettere il file plaid.jpg nella cartella stylesheets e cambiare il percorso nel file .css –

Se questo è veramente tutto ciò che è nel vostro File CSS, quindi sì, non accadrà nulla. Hai bisogno di un selettore, anche se è così semplice come body:

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

fonte

2012-12-19 03:39:29 duskwuff

Ho dichiarato quello che era nel mio file css meno il selettore, ho usato ogni selettore possibile. –

Prova questa:

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

esempio jsfiddle: http://jsfiddle.net/Q9Zfa/

fonte

2012-12-19 03:39:41

Più importante

Tenete a mente che gli URL relativi sono risolti dalla URL del foglio di stile.

Quindi funzionerà se la cartella images si trova nella cartella stylesheets.

Da te descrizione si avrebbe bisogno di cambiarlo a uno

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

url("/images/plaid.jpg")

aggiuntive 1

Inoltre non è possibile avere alcun selettore ..

CSS viene applicato attraverso selettori ..

Ulteriori 2

Si dovrebbe utilizzare la scorciatoia background di passare più valori come questo

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

o la sintassi di specificare verbose ogni proprietà da solo

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

fonte

2012-12-19 03:40:15

cambiato in questo e ancora non ha funzionato il corpo { background-image: url ("/ images/plaid.jpg"); background-repeat: no-repeat; } –

anche io uso i selettori semplicemente non ne ho incluso perché ho usato 15-20 e non sarebbe importante scrivere tutte le varianti. body o html dovrebbe funzionare come selettore nella sua forma più generale, ma non so come possa sapere quali siano le loro dimensioni. Ho anche inserito il file plaid.jpg all'interno della cartella dei miei fogli di stile e ho cambiato il percorso in /stylesheets/plaid.jpg e non ha funzionato neanche. non mi permetterebbe di modificare il mio post precedente –

@codeyb quando si fornisce un esempio eccezionalmente incompleto, tutti si aspettano il peggio (specialmente quando si dice * nessun selettore *). Abbiamo bisogno di abbastanza per sapere che non lo stai facendo completamente sbagliato. – cimmanon

Si può eseguire il debug utilizzando due modi:

Press CTRL +U per visualizzare la pagina di origine. Premere CTRL + F per trovare "mystyles.css" nella fonte. clicca sul link mystyles.css e controlla se non mostra "404 non trovato".
È possibile ISPEZIONARE ELEMENT IN FIRBUG e impostare il percorso su Immagine, impostare l'altezza e la larghezza dell'immagine perché a volte l'immagine non viene visualizzata.

Spero che questo possa funzionare !!.

fonte

2012-12-19 04:28:19

Ho provato la prima tecnica prima di tutto, come faccio a impostare l'altezza e la larghezza img in modo che .css lo accetti? Ho provato a modificarlo in Photoshop CS6. –

La prima tecnica consiste nell'esaminare se mystyles.css è incluso o meno con il percorso corretto. devi provare la seconda tecnica che è veloce. Puoi impostare il percorso su Immagine, Imposta altezza e larghezza dell'immagine in frebug. –

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

fonte

2013-10-05 12:33:09 Raimac

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

risposta

Problemi correlati