imaggine come sfondo su prestashop

[nosaprei]

Salve a tutti, sono nuovo del form e avrei bisogno del vostro aiuto. Come da titoto vorrei mettere una immagine come sfondo nel mio e-commerce prestashop ma dopo vari tentativi di modifica del global.css e relativo background del body non riesco a venirne a capo.
Ho fatto questa modifica:



Tenete conso che l'immagine campagna.jpg è nella cartella img, quindi credo che il percorso sia giusto ma il sito mi si presenta in questo modo:




Mi era stato suggerito di mettere background al posto di background-image ma anche con questa modifica il risultato è identico a quello nell'immagine che ho postato.

Essendo alle prime armi per quanto riguarda il css, se qualche anima buona mi potesse dare una mano gliene sarei veramente grato.

Ciao

[Mich_]

Impossibile capire cosa succede con quel codice.

Posta il codice HTML e CSS della tua pagina.
Per semplificare il lavoro a chi ti puo` aiutare, posta il codice formattato e correttamente indentato, usando il tag CODE che puoi inserire mediante il bottone sopra l'area del testo.
Usa il copia-incolla del tuo sistema operativo per copiare, altrimenti potresti inserire errori di trascrizione.

[nosaprei]

Originariamente inviato da Mich_
Impossibile capire cosa succede con quel codice.

Posta il codice HTML e CSS della tua pagina.
Per semplificare il lavoro a chi ti puo` aiutare, posta il codice formattato e correttamente indentato, usando il tag CODE che puoi inserire mediante il bottone sopra l'area del testo.
Usa il copia-incolla del tuo sistema operativo per copiare, altrimenti potresti inserire errori di trascrizione.

Grazie per i consigli e scusa per l'errore, cmq il codice è questo:

/*
	PrestaShop CSS
	18 used colors : 
	10 grays: #374853 #595a5e #5d717e #76839b #888 #bdc2c9 #d0d1d5 #d0d3d8 #e5e6e7 #f1f2f4
	4 fushias: #f6dce8 #dd2a81 #971d58 #5d0630
	2 yellows: #f8e1a0 #f9e400
	1 green: #488c40
	1 red: #da0f00
*/

* {
	padding:0;
	margin:0;
}

body {
	background: #FFFFFF url('../img/campagna.jpg') repeat-y scroll left top; 
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	color: #5d717e;
	text-align:center;
}

Credo che la parte incriminata sia questa oppure è necessario postare tutto il codice?

[Mich_]

Mi sono permesso di correggere il tuo post, inserendo anche il [ /code ] che avevi omesso o cancellato.

La prima parte del CSS postato e` un commento, e non ha alcun effetto.

L'attributo background che hai postato ha dei problemi di sintassi (il valore scroll non mi risulta sia tra quelli validi), ma questo non dovrebbe influire sull'interpretazione dei valori precedenti (mentre puo` aver effetto sui valori successivi). Inoltre dentro le parentesi non ci vanno apici o virgolette, ma praticamente tutti i brwoser interpretano ugualmente, per cui non e` quello che da` problemi.

Se il problema e` che non viene visualizzata l'immagine di sfondo, dall'esperienza di errori analoghi potrebbe essere che il path non e` corretto. Il path del file deve essere relativo alla posizione del file CSS (non della pagina HTML).

[nosaprei]

Scusami per il CODE ma è stato un errore di cancellazione.
Anche io avevo dbbi sul path del file che in questo caso è la foto ma sinceramente non riesco a venirne a capo, ho provato a mettere il file nella stessa cartella dove è posizioneto il file .css ma niente da fare. A questo punto mi sapresti dare qualch consiglio su come e dove mettere l'immagine e poi su come poter scrivere il percorso corretto?
Grazie

[nosaprei]

Ho risolto il problema, ora funziona tutto alla grande solo che vorrei sapere che risoluzione dovrebbe avere la foto per essere a tutta pagina senza che debba farla ripetere per coprire tutto lo sfondo.
Grazie

[Mich_]

Originariamente inviato da nosaprei
Ho risolto il problema, ora funziona tutto alla grande solo che vorrei sapere che risoluzione dovrebbe avere la foto per essere a tutta pagina senza che debba farla ripetere per coprire tutto lo sfondo.
Grazie

Impossibile rispondere.
Una foto (o comunque un'immagine) ha una sua dimensione intrinseca in px, e i browser non sono in grado di modificare le dimensioni delle immagini di sfondo. (In verita` con CSS3 la cosa e` possibile, ma ancora non sufficientemente supportato da parte dei browser.)

Ci sono dei trucchi pero`:
- organizzare l'immagine in modo che la parte piu` importante resti nel mezzo dell'immagine
- sistemare l'immagine in mezzo alla pagina definendo anche il colore di sfondo uguale al colore dei bordi dell'immagine
- definire il no-repeat nel CSS

[nosaprei]

OK grazie a tutti per i consigli. Dato che ci sono, orrei chiedervi come posso dopo aver impostato l'immagine come sfondo, mettere un'altro sfondo che in questo caso non è un'immagine ma solo un colore, solamente nella parte centrale della pagina. Per intenderci si vedrebbe l'immagine come sfondo intera ma nella parte centrale lo sfondo sarebbe bianco come in questo tema "SLIDE2":

http://www.catalogo-onlinersi.com.ar...-template.html

Se notate bene ingrandendo la foro la parte centrale è bianca ma un pò traspare in modo tale da far intravedere l'immagine dello sfondo.
Su quale parte del css devo agire per ottenere questo effetto?

[Mich_]

In pratica stai chiedendo come inserire un elemento sopra un altro: un <div> all'interno di un altro, opportunamento posizionato. Probabilmente quello che ti serve e` qualcosa del tipo:

HTML:
<body>
  <div id="header"> ... </div>
  <div id="centrato_semitrasp">
    ...
  </div>
</body>

CSS:
html, body {
  width: 100%;
  background: ...;         /* questo lo hai gia` */
}
#header {
  width: 80%;             /* valori da sistemare */
  height: 10em;
  background: transparent;    /* non e` necessario, ma lo esplicito per chiarezza */
  margin: 0 auto;              /* centra nello spazio a disposizione */
}
#centrato_semitrasp {
  width: 400px;
  margin 0 auto;
  background: transparent url(semitrasp.png) repeat;
}

Attualmente per uno sfondo semitrasparente si usano ancora le immagini: in futuro si potranno usare i colori RGBa, ma ancora non sono supportati a sufficienza.
Il file semitrasp.png e` un'immagine con la trasparenza che vuoi, che viene ripetuta in tutte le direzioni.

[nosaprei]

Originariamente inviato da Mich_
In pratica stai chiedendo come inserire un elemento sopra un altro: un <div> all'interno di un altro, opportunamento posizionato. Probabilmente quello che ti serve e` qualcosa del tipo:

HTML:
<body>
  <div id="header"> ... </div>
  <div id="centrato_semitrasp">
    ...
  </div>
</body>

CSS:
html, body {
  width: 100%;
  background: ...;         /* questo lo hai gia` */
}
#header {
  width: 80%;             /* valori da sistemare */
  height: 10em;
  background: transparent;    /* non e` necessario, ma lo esplicito per chiarezza */
  margin: 0 auto;              /* centra nello spazio a disposizione */
}
#centrato_semitrasp {
  width: 400px;
  margin 0 auto;
  background: transparent url(semitrasp.png) repeat;
}

Attualmente per uno sfondo semitrasparente si usano ancora le immagini: in futuro si potranno usare i colori RGBa, ma ancora non sono supportati a sufficienza.
Il file semitrasp.png e` un'immagine con la trasparenza che vuoi, che viene ripetuta in tutte le direzioni.

Grazie per l'aiuto, ho iniziato a fare un pò di prove ma non riesco ad avere un risultato giusto fino ad ora, per quanto riguarda il file semitrasp.png, deve essere una immagine che devo inserire in remoto giusto? come faccio a far variare la trsparenza? diciamo che voglio una sorta di opacità come descritta in questa pagina:

http://css.html.it/articoli/leggi/30...ulle-immagini/

Il fatto è che vorrei lo stesso effetto della didascalia trasparente al centro della mia pagina e che sovrasti l'immagine senza la scitta naturalmente, perchè in pratica l'opacità dovrebbe restare sotto le colonne di desta e sinistra e centrale del mio shop im modo tale da rendere chiare le scritte e tutto il resto e lasciare i margini destra e sinitra della pagina nomrale senza opavità. Spero di essere stato chiaro. GRAZIE


NEW: facendo alcune prove ho notato che agendo sulla stringha #page posso ottenere l'effetto che voglio, infatti aggiungendo un "background: white;" vedo che lo sfondo della parte centrale della pagina si colora di bianco. A questo punto come posso renderlo opacizzato o semi trsparente per far in modo che si vede la sovrapposizione con l'immagine di sfondo? Facendo una modifica in #page ottengo lo stesso risultato su tutte le pagine? e soprattutto è corretto quello che sto facendo?