Background

[leogds]

Ciao a tutti, ho un problema con il background di css.
Ho impostato un div con una class e nel file css ho impostato un'immagine come background riferito a quella class. L'immagine era un po' grande e non andava bene schiacciata quindi per tutti gli elementi che erano sotto ho impostato una position relative e li ho abbassati un po' con top: alcuni px. Il punto è che pur avendo fatto questo l'immagine a un certo punto è come se fosse tagliata, quindi più sotto c'è il bianco e non il resto dell'img. Cosa posso fare?

[KillerWorm]

Ciao e benvenuto, le indicazioni che hai fornito non sono molto chiare: bisogna capire cosa intendi per "come se fosse tagliata" e quale risultato vorresti invece ottenere.

Tieni comunque presenti alcuni punti:

- di norma il background applicato ad un qualsiasi elemento non potrà mai sbordare dall'ingombro effettivo dell'elemento stesso. Può essere che il tuo div sia "mal dimensionato" secondo ciò che vuoi ottenere o, peggio ancora, l'intero layout sia mal progettato.

- il mondo del web-design ha differenze sostanziali rispetto alla grafica editoriale. Se stai lavorando ad una pagina web, che dovrai rendere pubblica online, è un palese errore pensare di ottenere una impostazione che soddisfi esclusivamente lo schermo del tuo dispositivo. Se questa è la tua situazione, direi che sei abbastanza fuori strada. Per ottenere un risultato apprezzabile dovrai comunque testare opportunamente il tuo elaborato su differenti dispositivi e/o dimensioni del viewport. In tal caso la strada che dovrai percorrere è tendenzialmente quella del responsive web design.

- usando un'immagine come background, di default questa viene rappresentata alla sua grandezza originaria e posizionata in alto a sinistra dell'elemento a cui è applicato il background, quindi ripetuta per creare un pattern. Presumo tu abbia usato di base un no-repeat per fare in modo che l'immagine fosse singola; ci sono comunque varie altre proprietà per "manipolare" opportunamente la presentazione di tale immagine; ad esempio è possibile applicare, attraverso la sotto-proprietà background-size, un dimensionamento specifico oppure automatico (vedi content o cover) per cercare di adattare l'immagine in modo responsive o, ancora, usare background-position per applicare un posizionamento differente rispetto a quello di default.


Se hai bisogno di risposte più mirate consiglio di postare il link della pagina online, se possibile, o un esempio concreto del problema e del risultato che vorresti ottenere. Per proporre un esempio minimo riproducibile online puoi anche utilizzare uno dei vari code-playground.