Problema scaling background responsive

[maurodes]

Ciao a tutti, ed innanzitutto, complimenti per la community
In secondo luogo ho un problema da porvi.


Sto realizzando un sito web per un'amica (in modo gratuito) tramite wordpress ed utilizzando il tema Themify Ultra. Il mio problema è che per risoluzioni desktop è tutto ok, ma su dispositivi mobili l'immagine di background nella home viene solamente croppata e non scalata, rendendomi difficile il piazzare un logo che sia leggibile ed uno zoom sull'immagine che abbia un senso (le immagini risultano troppo zoommate, ovviamente). Sapreste indicami come posso fare per risolvere il problema, trovando un modo per scalare l'immagine e cropparla in modo da averla a tutto schermo come nella versione desktop? Tenete conto che sono un'asino del linguaggio web (so fare ben poco ). Se qualcuno fosse così gentile da aiutarmi gliene sarei davvero molto grato qui trovate la pagina incriminata www.studiodeltaprova.altervista.org

[KillerWorm]

Ciao, non so se hai già modificato qualcosa ma, da quel che vedo, lo sfondo è impostato con background-size:cover; questo significa che l'immagine non è solo ritagliata ma viene comunque scalata in modo da riuscire a coprire sempre l'area dell'elemento in questione.
Se poi il logo va a posizionarsi in modo scoordinato da tale immagine, questo è un altro problema.

Personalmente ti consiglierei di non cercare a tutti i costi "l'incastro" tra logo (intestazione) e immagine di sfondo ma, piuttosto, fai in modo che le due cose restino a se stanti anche se sovrapposte. Ad esempio potresti impostare un box o una fascia semitrasparente al di sotto del logo stesso, in modo che qualunque sia l'immagine che ci sta sotto e qualunque sia la posizione, il logo resti comunque ben distinto e sempre leggibile.

Prova, ad esempio, ad impostare qualcosa del genere all'elemento contenitore del logo, o al tag img stesso (cioè l'elemento img del logo):

background: rgba(255, 255, 255, .6);
padding: 8px;

Chiaramente è solo un'idea.

[maurodes]

scusami per la risposta tardiva ma comunque grazie della risposta
si, ho fatto alcune modifiche, ma niente codice. Ho modificato l'immagine... ora va abbastanza bene, per� mi piacerebbe avere pi� controllo sul fattore di scala dell'immagine.. vorrei scalasse di pi�, anche perch� sul bordo inferiore c'� ancora molto margine. La tua osservazione sul fondo semitrasparente non � male, per� mi piacerebbe capire se posso giocare su questo maledetto fattore di scala e non so nemmeno dove inserire il codice che mi hai dato ahhahaha

[KillerWorm]

Potrei sbagliarmi ma mi pare non sia possibile definire un "fattore di scala", però attraverso la stessa proprietà background-size è possibile definire le dimensioni in pixel.

e non so nemmeno dove inserire il codice che mi hai dato ahhahaha

Puoi fare in vari modi. Non so, potresti aggiungerlo al css personalizzato di wp.
Chiaramente devi applicarlo all'elemento in questione, come già detto, ad esempio al tag img.
Potrebbe quindi essere una cosa del genere:

.wp-image-5430{
  background: rgba(255, 255, 255, .6);
  padding: 8px;
}

Chiaramente è solo un'idea, poi vedi tu.

[maurodes]

Potrei sbagliarmi ma mi pare non sia possibile definire un "fattore di scala", però attraverso la stessa proprietà background-size è possibile definire le dimensioni in pixel.


Puoi fare in vari modi. Non so, potresti aggiungerlo al css personalizzato di wp.
Chiaramente devi applicarlo all'elemento in questione, come già detto, ad esempio al tag img.
Potrebbe quindi essere una cosa del genere:

.wp-image-5430{
  background: rgba(255, 255, 255, .6);
  padding: 8px;
}

Chiaramente è solo un'idea, poi vedi tu.

Mi sembra fica come idea! Grazie!

ora ho modificato un po usando

.wp-image-5430{
background: rgba(255, 255, 255, .3);
padding: 22px 200px 22px 200px;
margin-top: 20%;
}

ma se volessi che i bordi dx ed sx toccassero sempre il bordo del dispositivo (senza lasciare spazi) dal quale viene visualizzato come potrei fare?

Grazie in anticipo del supporto

[KillerWorm]

Occhio perché se aggiungi il padding in quel modo la dimensione dell'elemento stesso si estende eccessivamente per cui, con risoluzioni più piccole dello schermo, il logo andrebbe a rimpicciolirsi.

ma se volessi che i bordi dx ed sx toccassero sempre il bordo del dispositivo (senza lasciare spazi) dal quale viene visualizzato come potrei fare?

Non saprei. Quell'elemento sta dentro un contenitore che non si estende completamente per la larghezza della finestra, per cui non puoi portarlo oltre i limiti di tale contenitore. Potresti eventualmente provare ad impostarlo con position absolute o qualcosa del genere, ma chiaramente la cosa andrebbe a complicarsi.

[maurodes]

Quindi dipende della dimensione del contenitore... a dire il vero c'è un modo (tramite le impostazioni del tema) per allargare la dimensione del contenitore a fullwidth, il problema è che però mi allarga tutto il logo su tutta la larghezza (ovviamente) del box.. io vorrei avere il logo della stessa dimensione, ma quella banda semitrasp di sfondo come dicevo prima