WebSite X5Help Center

 
Beate E.
Beate E.
User

Immagine di sfondo pagina deformata nel responsive  it

Auteur : Beate E.
Visité 1464, Followers 3, Partagé 0  

Buona sera;

volevo trasformare in web-responsive il sito www.parcoculturaledicamaiano.it

Il grosso problema è l'immagine di sfondo del contenuto della homepage: purtroppo nelle risoluzioni sotto ai 720 pixel l'immagine si deforma e rende inapplicabile il modello responsive.

Ho pensato a 3 soluzioni che forse/probabilmente sono irrealizzabili:

1) ho cercato di spostare i breakpoint per mantenere la visualizzazione per tablet anche sui dispositivi più piccoli, ma mi pare che non si possa fare (eccetto che per il breakpoint più piccolo e quello non mi cambia niente)

2) ho guardato se ci fosse la possibilità di creare una homepage differente per le risoluzioni più basse, ma non mi sembra che si possa fare... o sì?

3) ho cercato di vedere se esiste un modo (semplice) per inserire un'immagine interattiva che possa sostituire la soluzione attuale ma non so se è fattibile.

C'è qualche soluzione alla quale non sono arrivata? Si può fare in modo che gli sfondi delle pagine si rimpiccoliscano invece di deformarsi?  Questa deformazione mi sembra una brutta cosa comunque....

allego lo screenshot dell'immagine deformata

Grazie, Beate

Posté le
4 RéPONSES
Mirko Boschetti
Mirko Boschetti
Moderator

prova con questo:

proprietà pagina-esperto-prima della chiusura del tag boady:

<div><img src="files/immagine.jpg" id="sfondo" alt="" /></div>


proprietà pagina-esperto-prima della chiusura del tag Head:

<style>
#sfondo{
position:absolute;
top:0;
left:0;
z-index:-2;
width:100%;
height:100%;
}
</style>


Inserire in files l'immagine relativa allo sfondo.

Lire plus
Posté le de Mirko Boschetti
Mirko Boschetti
Mirko Boschetti
Moderator

forse quello sopra non è quello che chiedi, ho provato questo nel tag head, e a me funziona:

<style>
#imContent{
    position:relative;
    height: 100%;
    background: url(files/1.jpg) no-repeat center center;
    background-size:cover;
   }
</style>

provalo e facci sapere...

Lire plus
Posté le de Mirko Boschetti
Beate E.
Beate E.
User
Auteur

oddio, mi rispondi in arabo ..... ora provo a seguire passo passo e ti dico, grazie!

Lire plus
Posté le de Beate E.
Beate E.
Beate E.
User
Auteur

no, allora inserendo quello che hai scritto prima della chiusura del tag body non cambia nulla;

inserendo la 1a soluzione prima della chiusura del tag Head sparisce tutto il contenuto della homepage, immagine di sfondo e contenuti;

inserendo la 2a soluzione, sparisce solo l'immagine dello sfondo, il contenuto e normale.

Però mi hai messo sulla strada giusta, cioè provare a cambiare le proprietà dalla pagina: avevo impostato "adatta contenuto alla finestra", ma impostando "non ripetere" le proporzioni dell'immagine rimangono fisse e quindi va bene ! Per ora viene fuori ugualmente un'assurdità ma provo ad elimiare un po' contenuti per il responsive.

Grazie!!!

Lire plus
Posté le de Beate E.