Codice immagine sfondo pagina 
Autore: Ettore P.
Visite 662,
Followers 1,
Condiviso 0
Ciao, ho la necessità di inserire un'immagine di sfondo pagina fissa, allineata al top, no repeat, responsive.
L'ideale sarebbe aggiungere anche il codice che consenta di sostituire l'immagine principale con un'immagine più piccola a partire da una risoluzione di 720 px.
Devo inserire i codici in un menu esterno, per questo motivo non posso usare le impostazioni di website (molto comode, ci mancherebbe)
Grazie in anticipo.
Postato il
... quindi non parli del programma...!?...
...puoi documentarti in RETE, per esempio qui: https://css-tricks.com/perfect-full-page-background-image/
... senza link non mi esprimo più di tanto,.. più che altro per poter valutare l'eventuale uso o abbinamento delle mie invenzioni, ...ma comunque in linea di massima riferimento ai 720 pixel basterebbe semplicemente condizionare la sostituzione dell'immagine di background con l'aggiunta di uno stile controllato da @media query relativo all'ente che ne fa uso (*), ...oppure da semplice JS...
...(*) ... a seconda della struttura potrebbe essere > HTML, > BODY, > #NomeEnteDivID...
.
Autore
Ciao Kola, al momento ho caricato un template solo per testare la funzionalità del menu overlay, mi sembra ok.
L'ideale sarebbe sostituire l'immagine in base alle risouzioni.
I codici che chiedo devo quindi inserirli nel css del menu; questo menu mi dà la possibilità di avere due layout differenti ed è per questo non utilizzo l'interfaccia grafica di website.
Il link temporaneo di prova è il solitohttps://ettorepoggipollini.com. Non far caso al contenuto e ad eventuali cose anomale, è solo per testare il menu ed il template insieme. Devo ancora inserire i colegamenti delle pagine e delle Ancore nel menu, figurati :)
Se riesci a guardarlo forse comprenderai meglio cosa intendo. Dovrei inserire un codice che indirizzi ad un'altra immagine a seconda della risoluzione.
Al momento, nel css del menu ho inserito il seguente codice:
background-color: transparent;
background-image: url(https://ettorepoggipollini.com/overlay/images/catfish2.jpg);
max-height: 1100px; /* specifico una altezza massima */
background-repeat: no-repeat;
background-size: cover;
background-position: top;
Autore
Approfitto per chiedere se è possibile linkare ad una immagine presente in una cartella del sito senza necessariamente digitare anche il nome del sito.
Voglio dire, nel caso della immagine di sfondo che si trova in overlay/images/catfis2.jpg
background-image: url(https://ettorepoggipollini.com/overlay/images/catfish2.jpg);
è possibile escludere il www.ettorepoggipollini.com iniziale? In modo da non essere obbligato a caricare la foto sul server per vedere l'anteprima quando sono offline.
... intanto puoi provare subito ad incollare questo codice dentro un TAG STYLE che hai già in uso:
@media (max-width: 719px) {body { background-image: url(https://cdn.pixabay.com/photo/2017/01/31/22/55/bank-2027944__340.jpg) !important; } }
... vedrai una panchina nella neve sotto ai 720 pixel...
... poi ovviamente potrai personalizzare a tuo piacere...
... per l'URL dell'immagine puoi usare la PATH relativa, per esempio per quella attuale del tuo esempio:
background-image: url(images/catfish2.jpg);
... potresti legare l'immagine (o le due immagini al progetto, allegando l'immagine e lasciando "files" come cartella già proposta per default (o indicarne una a piacere), ...ed in questo caso userai questo URL "relativo" per la prima immagine:
background-image: url(files/catfish2.jpg);
... e questo URL per la seconda immagine nel @media query 719 EXTRA detto prima:
background-image: url(files/immagineX720.jpg);
.
Autore
Grande Kola! Ho caricato il css modificato col tuo tag e funziona :) Dai un'occhiata anche tu per sicurezza.
Posso inserire quindi nella cartella "files" le mie immagini, così non devo creare altre cartelle, certo, perfetto!
Grazie mille :)
Procedo con altri aggiustamenti, trovo difficoltà ad far scomparire l'ocerlay del menu qyando linko ad un'Ancora della home page mentre tutto ok se linko ad una pagina specifica. Forse sbaglio la sintassi....
Provo a caricare dei link di prova tra poco, così puoi verificare anche tu dove si trovi l'errore.
Grazie ancora!
Autore
Dimenticavo, come faccio ad avere l'immagine di sfondo fissa, ovvero che non scrolli col menu?
Pensavo : position: fixed ma sembra non funzioni bene......
... visto, il cambio immagine funziona; .. adesso devi solo allegarle al progetto...
... per il resto ci sarebbe da studiare, e forse dovresti consultare il sito della fonte di quel codice...
.
... potresti provare con il mio metodo basato sul div_custom, ma adesso devo andare, magari se non trovi altro, e nel caso, se ne riparlerà domani in giornata...
.
.
Autore
Direi che hai risolto :)
Purtroppo su codepen non ci sono le istruzioni ed i riferimenti, per trovare i parametri che vuoi modificare devi sperimentare un sacco di volte....
Ma va bene, dai :)
Chiudo il post come risolto.
...OK... casomai ci risentiremo altrove...