CSS: background-image

**Horazon** · 11-03-2005, 11:52

Ciao a tutti,
vi pongo un altro quesito frutto dell'inesperienza con i css...
Il problema e` questo:
ho un web strutturato nel seguente modo
root

+-css [dir]
|+-template.css
+-images [dir]
|+-bg.jpg
|+-header-bg.gif
+-home.htm

il problema e` che nella cartella "images" ci sono gli sfondi che dovro` applicare nel css, ma non so come linkarli.
Ho messo il tutto su un server web ed ho utilizzato la sintassi
background-image: url(http://localhost/gni_it/images/bg.jpg);
con IE funziona, mentre con FireFox no...

:sclero:

Grazie a tutti.

**Mich_** · 11-03-2005, 11:59

C'e` un errore nel path, ma non conosco la struttura del tuo sito, quindi non so come correggere.

In linea di massima il prefisso http:// non ci va: dovresti iniziare la path con una slash che indica la dir principale del sito.

Nota che i path assoluti o relativi alla home cambiano se lavori in locale o attraverso un webserver; i path relativi (che non iniziano ne` con http: ne` con / ) invece rimangono uguali.

**pierofix** · 11-03-2005, 12:00

Se il tuo file si trova nella cartella css (css/file.css) e le immagini in un'altra (img/img.png - css e img sono sorelle), nel css punterai così:

codice:

body {
   background-image:url(../img.png);
}

"../" significa "esci dalla cartella".

Chiaro?

**andrea.paiola** · 11-03-2005, 12:05

Originariamente inviato da pierofix
"../" significa "esci dalla cartella".

veramente significa risali l'albero di directory... vabbè son troppo pignolo

**pierofix** · 11-03-2005, 12:12

Sì Andrea, la tua descrizione è corretta: mi ero spiegato male io.

**Horazon** · 11-03-2005, 12:16

ok, risolto con il "../" (avevo gia provato in test senza mettere sotto IIS il sito ma non andava...).
Ora pero` ci sono altri due problemi.

codice:

body		{font: 9px Verdana, Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 0;
		background-image: url(../images/bg.jpg);
		text-align: center;}

in IE il "text-align: center" mi centra i div in mezzo allo schermo, su FireFox no...

Secondo problema, in un altro post mi sono fatto consigliare come impostare i layout delle tre colonne di contents per far si che, anche se una colonna laterale fosse piu` larga, si allungasse tutto il contenitore centrale.
Praticamente la pagina e` strutturata nel seguente modo:

codice:

<body>
	<div id="header" class="header">
		Prova
	</div>
	
	<hr />
	
	<div id="body" class="body">
		
		<div id="body-main_menu"> Main menu 
		</div>
	
		<hr />
		
		<div id="body-right_menu">
			Right Menu

			Right Menu

			Right Menu

			Right Menu
		</div>
		
		<hr />
		
		<div id="body-contents">
			Content

		</div>
	</div>
</body>

Su IE in effetti il "body-right_menu" (che e` float) allunga anche il div "body", mentre su firefox sfora dal div ("body" ha un BG differente da quello della pagina, e si nota che la sezione di destra sfora).

Avete idee?
Se volete vi posto il css...

**Horazon** · 11-03-2005, 12:18

Ok, per il center ho trovato risposta in un post in prima pagina, chiedo scusa ^^;

**pierofix** · 11-03-2005, 12:20

Per centrare un elemento - di solito il div contenitore - nella padina occorre applicare sia il text-align:center; che impostare su auto i margini laterali. Ecco come:

codice:

body {
   text-align:center;
}
#contenitore {
   width:80%;
   margin:0 auto; /* questo imposta a 0 i margini sup e inf, e ad auto quelli laterali */
}

Discussione: CSS: background-image

Strumenti discussione

Ricerca discussione

Visualizza

CSS: background-image

Permessi di invio