background-image

**hab** · 25-11-2007, 10:31

Seguendo il tutorial sui css arrivato a livello di come inserire delle immagini con i css mi dice di fare:

div body {background-image: url(http://www.server.it/images/sfondo.gif); }

nel mio file html ho qst:

<div id="striscia"></div>

ma se scrivo sul css:

div#striscia{
background-image: url(STRISCIA.jpg);
}

non mi viene fuori nulla..
come mai??

Mi sono accorto che se volessi quell'immagine dovrei scrivere nel file html:
<div id="striscia">[img]striscia.jpg[/img]</div>

e dal css impostare solo il punto in sui collocare l'img...
se volessi fare tutto da css sapreste dirmi come posso fare??
grazie!

**Miki73** · 25-11-2007, 10:36

se vuoi ottenere lo stesso effetto devi fare così:

codice:

<div id="striscia">[img]img_vuota.gif[/img]</div>

dove img_vuota.gif è un'immagine delle stesse dimensioni di sfondo.gif solo trasparente
ti ricordo che un DIV si adatta al suo contenuto, se non c'è ha altezza 0.
Per quanto riguarda le regole CSS va bene come avevi scritto:

codice:

div#striscia{
background-image: url(STRISCIA.jpg);
}

**Myaku** · 25-11-2007, 11:27

Originariamente inviato da Miki73

Ti ricordo che un DIV si adatta al suo contenuto, se non c'è ha altezza 0.

senza andare a "sporcare" l'html è sufficiente definire una height al div direttamente da css (o una min-height, con gli accorgimenti del caso per IE6 che non la supporta)

**hab** · 25-11-2007, 11:34

In poke parole dovrei andare a dare una height nel css..ovvero cosi:

#striscia{
margin-left: 60px;
margin-top: 232px;
background-image:url(STRISCIA.jpg);
height: auto;
}

e nel file html cosi??
<div id="striscia"></div>

perke cosi la striscia non mi si vede lo stesso..

**Myaku** · 25-11-2007, 11:39

Originariamente inviato da hab
#striscia{
margin-left: 60px;
margin-top: 232px;
background-image:url(STRISCIA.jpg);
height: l'altezza dell'immagine;
}

e nel file html cosi??
<div id="striscia"></div>

ripeto, può essere che ti serva usare min-height. Per sapere come comportarti con IE6, fai una ricerca.

**hab** · 25-11-2007, 11:46

utilizzo mozilla..
ma cmq anke usando height:46px; che è l'altezza dellì'immagine..non viene caricata..

**Myaku** · 25-11-2007, 11:53

Originariamente inviato da hab
utilizzo mozilla..
ma cmq anke usando height:46px; che è l'altezza dellì'immagine..non viene caricata..

ok, ripartiamo.
1. il percorso è esatto? (occhio alle minuscole/maiuscole)
2. puoi postare il link alla pagina, così ci guardiamo?

**hab** · 25-11-2007, 12:25

1. si il percorso è esatto..

anke perke lavorando con dreamweaver nel momento in cui scrivo backgroung-image mi vien fuori un tastino sfoglia, che mi permette di selezionare il file che voglio..

2.sto lavorando in localhost...

**hab** · 25-11-2007, 12:28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style>
@import url(format.css);
* {
font: 12px Verdana, Arial, Helvetica, sans-serif;
}

</style>
QUESTO è IL MIO FILE HTML ricerca.html
</head>

<body>

LOGIN

<div id="image">[img]SEARCH-ENGINE.jpg[/img]</div>
<div id="striscia">[img]STRISCIA.jpg[/img]</div>

<form name="searchtxt" >
<input type="text" class="form"/>
<input type="submit" class="search" value="Ricerca">
</form>

Ricerca Avanzata

</body>
</html>

QUESTO è IL MIO FILE FORMAT.CSS
<style type="text/css">
* {
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
#striscia, div#image, .form, .search, .advsearch{
position:absolute
}

.log {
text-align: right;
margin-top: 10px;
margin-right: 15px;
}

div#image{
margin-left: 250px;
margin-top: 150px;
}

#striscia{
margin-left: 60px;
margin-top: 232px;
}

.form {
background: #ffffff;
padding: 3px;
width: 500px;
border: 1px solid #000000;
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
/*margin-top: 240px;*/
margin-top: 240px;
margin-left: 220px;
}

.search{
/*padding: 0px;*/
margin-top:240px;
margin-left: 730px;
font-size: 12px;
}

.advsearch{
margin-left: 220px;
margin-top: 262px;
color:#FFFFFF;
padding: 0px;
font-size:11px;
}

</style>

**Myaku** · 25-11-2007, 12:41

Ci sono degli errori.
1.

codice:

<style>

non va bene. devi specificare il type

2.

codice:

</style>
QUESTO è IL MIO FILE HTML ricerca.html
</head>

spero che tu l'abbia messo adesso come indicazione ...

3. occhio alle chiusure dei tag
4.

codice:

<div id="striscia">[img]STRISCIA.jpg[/img]</div>

l'hai messo nell'html, non nel css. in questo modo lo visualizzi?

5. se il css è esterno, non ci devi ripetere il <style...> all'interno del file

Discussione: background-image

Strumenti discussione

Ricerca discussione

Visualizza

background-image

Permessi di invio