Risolto il problema con l'immagine di sfondo e il layout del mio sito Web su Blogger tramite CSS o HTML

2017-07-06 html css image background blogger

Ecco il mio sito web: www.ChrisStephensMusic.net

Come puoi vedere l'immagine di sfondo non è a schermo intero e si sposta quando la pagina viene fatta scorrere. Mi piacerebbe che fosse a schermo intero e rimanesse fermo mentre il contenuto scorre. Ho provato i suggerimenti CSS che ho potuto trovare durante la ricerca di questo argomento qui, ma non fanno nulla quando li aggiungo al "CSS personalizzato" su Blogger. Esiste un modo migliore per risolvere questo problema utilizzando HTML o c'è qualcos'altro che devo fare per ottenere il riconoscimento del CSS personalizzato?

Answers

Prova a usare questo codice nel tuo file css per l'immagine di sfondo:

    width: 100%;
    background-size: cover;
    background-attachment: fixed;

CSS

html { 
  background: url(image.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

fonte: https://css-tricks.com/perfect-full-page-background-image/

Aggiungi il seguente CSS -

.bg-photo-container, div.bg-photo-overlay {
  height: 100%;
  position: fixed;
}

L'opzione CSS personalizzata non funziona perché ad essa sono state aggiunte alcune regole non valide, il che fa sì che ogni regola successiva venga ignorata. Vorrei invece suggerire, aggiungendolo tramite gadget HTML / JavaScript avvolgendo il codice in un tag di style modo che appaia

<style>
  .bg-photo-container, div.bg-photo-overlay {
    height: 100%;
    position: fixed;
  }
</style>

Il risultato finale dovrebbe apparire come:

inserisci qui la descrizione dell'immagine

Related