Utilizzando fogli di stile CSS, è possibile scrivere codice che colpisce solo le pagine Web quando si sono visti con particolare media, come lo schermo di un dispositivo mobile, un lettore di schermo per i non vedenti, o una stampante. Stili scritte per le stampanti consentono di controllare come le pagine stampate su carta. Raramente si vuole fare un sito web lo stesso aspetto su carta come avviene in un browser, in quanto così facendo si sprecare inchiostro dell'utente e creare brutti cut-off tra le pagine. Utilizzo delle regole "@media", è possibile creare un intero altro stile per la versione stampata del tuo sito web, aggiungendo e sottraendo stili a vostra discrezione.

istruzione

1 Aprire il foglio di stile per il tuo sito e scorrere fino alla fine del suo codice. In una nuova riga, aggiungere una regola "@media" per la stampa come segue:

@media print {
}

Tutte le regole di stile per la versione stampata delle pagine sul tuo sito andrà tra le parentesi graffe della regola "@media". Questi stili costruire sopra o modificare gli stili già applicati alla versione schermo del vostro foglio di stile; in altre parole, gli stili applicati al sito quando viene visualizzato in un browser.

2 Creare una regola di mira l'intero corpo della pagina Web. Dentro questa regola, impostare l'imbottitura per eguagliare l'altezza della tua immagine più qualsiasi spazio necessario tra l'immagine e il resto della pagina:

@media print {
body {
padding: 200px;
}
}

3 Aggiungere l'immagine come sfondo nella regola stile per il corpo della pagina:

@media print {
body {
padding: 200px;
background-image: url ( 'path / to / image.png') centro no-repeat;
}
}

Modificare il percorso del file dentro "url ()" per indicare la posizione dell'immagine sul server Web. Avanti, specificare una posizione, come ad esempio "centro" o "sinistra." Usa "no-repeat" per evitare che l'immagine venga ripetuta.