Immagine di sfondo negli articoli

[zacca]

Buongiorno, avrei la necessità di inserire un' immagine di sfondo negli articoli! Come posso fare?

[zacca]

nulla che si possa fare?

[tomtomeight]

Sollecitare una risposta non è mai una buona cosa, invece quello che nel frattempo puoi fare è una ricerca nel forum stesso. Mi ricordo che molto tempo fa ho fatto la stessa richiesta e ho risolto, ecco potresti proprio trovare quel mio post. Ovvio che al momento non ricordo il codice  e non ho tempo per cercarlo al posto tuo. Altrimenti aspetta qualcun altro ma senza uppare. Grazie.

[zacca]

scusate!

[fabietto488]

Ciao!
Qui il post di cui parlava "tomtomeight":

http://forum.joomla.it/index.php?topic=55019.0

[zacca]

Perfetto! Così funzina.
Un'ultima cosa: come faccio a renderla al 100% dell'altezza e larghezza? Cioè, dovrebbe adattarsi al contenuto della pagina.

La stringa per lo sfondo è questa:

<div style="background-image: url('immagine.jpg');">

dove inserisco questa variabile?

width="100%" height="100%

[maxzilla]

nel div cosi

<div style="background-image: url('immagine.jpg'); width:100%; height:100%;">

[zacca]

Niente da fare..... non si riduce!


http://www.pietroloschi.it/10-chirurgie/22-chirurgia-ricostruttiva

[maxzilla]

intanto manca il segno "%",

tu avevi chiesto di inserire i due parametri nel div,
ma di preciso cosa ti serve?

[zacca]

Appena messi i %, stavo facendo una prova coi pixel
A me servirebbe che la foto prenda il 100% della pagina.

Tipo se in una pagina come quella che ho postata, servirebbe che la foto si veda per intero e non tagliata in base al contenuto.

[maxzilla]

allora devi metterla nel file nucleus.css alla riga 97

.g-container {

    background-image: url("/images/sfondo_loschi_web.png");

    margin: 0 auto;
    padding: 0;}

[zacca]

e questo sarà per tutti gli articoli o solo in quelli che decido io?

[maxzilla]

per tutti, e una regola generale associata ai contenuti.

[zacca]

comunque non funziona

io ho fatto così:
97     .g-container { background-image: url("/images/sfondo_loschi_web.png");
98     margin: 0 auto;
99     padding: 0; }

[tomtomeight]

Aggiungi background-size: cover;

[zacca]

dove lo inserisco?
scusate il mio non sapere nulla di codice

[tomtomeight]

Nel div g-container, aggiungi alle righe che hai.
Non sapere nulla di codice non è una colpa, ma non preoccuparsi di imparare sì.

[zacca]

.g-container { background-image: url("/images/sfondo_loschi_web.png");
background-size: cover;
margin: 0 auto;
padding: 0; }


ma non funzina.

[tomtomeight]

Non funziona, cioè non si vede nulla, non si ridimensiona, non .....

[zacca]

non si ridimensiona l'immagine di sfondo

[tomtomeight]

Dai uno sguardo quì:


http://www.w3schools.com/cssref/css3_pr_background-size.asp

[zacca]

Nulla da fare!

Ho inserito il codice così:

div {
    background: url(/images/sfondo_loschi_web.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


Ma non adatta l'immagine di sfondo

[zacca]

non so più dove guardare per far adattare l'immagine alla pagina di sfondo!
Non ci sarebbe un'altra soluzione?

[maxzilla]

prova ad aggiungere anche
 background-size: 100% auto;

a quello che c'e' ora nel div che hai creato
con firebug funziona

<div style="background-image: url("/images/sfondo_loschi_web.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 100%;
width: 100%; ">

[zacca]

Ma devo metterlo all'interno dell'articolo con fire bug?
Se è così non funziona!
Non si vede lo sfondo della pagina

http://www.pietroloschi.it/10-chirurgie/22-chirurgia-ricostruttiva

[zacca]

Ho inserito questo codice:

<div style="background-image: url('/images/sfondo_loschi_web.png')";
background-repeat: no-repeat;
background-size: 100% auto;
height: 100%;
width: 100%; ">

Il problema è che non si adatta alla pagina! Se rimpicciolisco la pagina del browser, si rimpicciolisce anche l'immagine!

Come posso avere l'immagine che si veda intera all'interno dell'articolo?

[zacca]

Ho risolto così:

<div style="background-image: url('/images/sfondo_loschi_web2.png'); width: 700px; height: 729px;">