Sfondo diverso mobile

[DavideKid]

Salve a tutti,

Volevo sapere cosa devo usare/inserire per permettere allo stesso sito di avere uno sfondo diverso a seconda della piattaforma che ci accede. Ad esempio:
Dal pc si vedere un determinato sfondo, da smartphone un'altro.

Grazie mille

[KillerWorm]

Ciao e benvenuto.
In generale si parla di responsive design. Solitamente attraverso il css si utilizzano le media queries per definire dei breakpoint in cui stabilire delle regole a seconda delle dimensioni del viewport (il termine "piattaforma" non si adatta in questo caso; meglio parlare di viewport).

Ad esempio:

body {
    background: blue url("sfondoDesktop.jpg");
}
@media screen and (max-width: 400px){
    body {
        background: red url("sfondoMobile.jpg");
    }
}

Per vedere l'effetto puoi comunque testarlo sul tuo pc, andando a ridurre la finestra del tuo browser fino a portarla ad una dimensione massima di 400px o usando lo strumento "Visualizzazione flessibile", su FireFox (o "Toggle devices toolbar", su Chrome) disponibile sulla "console web" (F12 da tastiera). Vedrai quindi il colore di sfondo che da blu diventa rosso quando si riduce la dimensione del viewport.

L'argomento è comunque generico per risponderti in maniera esaustiva in un post. Ti invito eventualmente, se sei interessato, a studiare qualche guida per apprendere e/o approfondire i dettagli del caso. Puoi iniziare a dare uno sguardo ai link che ti ho indicato su questo stesso post.
Ti segnalo inoltre i link utili css (discussione in evidenza) dove puoi trovare molti riferimenti a guide e articoli su cui approfondire lo studio, e tanto altro materiale da cui prendere spunto per i tuoi progetti. Al capitolo 3 poi trovare diversi riferimenti al responsive design.

Buon proseguimento e buona permanenza sul forum.

[DavideKid]

Grazie Mille!! Mi sei stato molto utile.

Non è che la stessa cosa si può fare con una determinata immagine?
Ovvero che se le dimensioni sono tot. viene visualizzata altrimenti no?

Grazie

[DavideKid]

Grazie Mille!! Mi sei stato molto utile.

Non è che la stessa cosa si può fare con una determinata immagine?
Ovvero che se le dimensioni sono tot. viene visualizzata altrimenti no?

Grazie

Con dimensioni intendevo "max-width:"dello screen

[KillerWorm]

Non è che la stessa cosa si può fare con una determinata immagine?

Certo, puoi impostare qualsiasi regola tu desideri impostare. A dire il vero, sull'esempio che ho postato, oltre a cambiare il colore di sfondo, viene impostata anche l'immagine (o meglio, in quel caso si tratta di due immagini definite nelle due regole; cioè una che sovrascrive l'altra a seconda della dimensione del viewport), ma ovviamente sono degli url fittizi.

La tua richiesta mi fa però presupporre che non hai seguito il mio consiglio di iniziare a studiare su qualche guida, quantomeno quelle che ti ho indicato. Non posso fare altro che ribadirti il consiglio così da comprendere, non tanto come impostare un immagine, ma il procedimento da usare per arrivare all'obbiettivo preposto; che sia impostare un'immagine di sfondo o qualsiasi altra cosa.

[DavideKid]

Ammetto che, poichè al momento sono impegnato nello studio di altre cose xD , non ho approfondito la guida che tu mi hai detto.

Però ammetto pure che probabilmente mi sono spiegato male. Non intendevo se era possibile inserire un'immagine come sfondo e farla cambiare a seconda delle dimensioni (cosa che peraltro ho già fatto seguendo il tuo consiglio), ma se si può inserire un immagine, che ne sò al centro della pagina, che sia visibile o meno a seconda delle dimensioni del viewport.

Comunque grazie ancora per la disponibilità!

[KillerWorm]

Ammetto che, poichè al momento sono impegnato nello studio di altre cose xD , non ho approfondito la guida che tu mi hai detto.

Figurati il mio è, e resta, un semplice consiglio.

Però ammetto pure che probabilmente mi sono spiegato male. Non intendevo se era possibile inserire un'immagine come sfondo e farla cambiare a seconda delle dimensioni (cosa che peraltro ho già fatto seguendo il tuo consiglio), ma se si può inserire un immagine, che ne sò al centro della pagina, che sia visibile o meno a seconda delle dimensioni del viewport.

Non ti sei spiegato male. Quello che ho postato era solo un esempio per mostrarti come si potrebbe utilizzare una media query.

Il punto è che tu non hai postato alcun codice di ciò che stai provando a fare, quantomeno per far capire che ci stai provando e che stai incontrando magari delle particolari difficoltà per le quali stai chiedendo aiuto.

In questo caso non è mia intenzione fornire una soluzione pronta all'uso da copiaincollare (poi è possibile che la fornisca magari qualche altro utente).

I riferimenti che ti ho indicato sono sufficienti a darti le informazioni per raggiungere da solo una soluzione adatta al problema.
Non ti ho indicato una specifica guida, ma diversi riferimenti che ti forniscono una linea guida per ciò che ti serve fare. Il procedimento è quello di definire dei breakpoint e, per questi, le regole che ti servono; ripeto: "che sia impostare un'immagine di sfondo o qualsiasi altra cosa".

Comunque grazie ancora per la disponibilità!

Non c'è di che

[DavideKid]

Infatti "giocando" con il consiglio che mi hai dato ho risolto il problema.

Appena avrò un po' più di tempo seguirò tutti le le guide da te consigliate!!
Grazie ancora!