Immagine che si ripete

**matti96** · 10-03-2014, 20:25

Salve! Devo ottenere una cosa di questo tipo:

[IMG1][IMG2]

Dove IMG2 si ripete fino al bordo destro (ed è attaccata ad IMG1).

Avevo provato questo ma non funziona:

style.css

codice:

#bar
{
    position:            absolute;
    background-repeat:     repeat-x;
    background-image:     url("images/linea.png");
    width:                100px;
  <!--  top:                239px; -->
  <!--  left:                10%; -->
}

pagina.html:

codice:

<img src="images/onda.png" style="position:absolute;top:239px;left:0px;width:10%">
<div id="bar"></div>

In pratica ho queste due immagini:
http://theworldofprogrammers.altervi...mages/onda.png
http://theworldofprogrammers.altervi...ages/linea.png (Altervista non ha aggiornato il file ma la linea è molto più stretta, 38x18, non 893x18)

Devo fare la linea del battito cardiaco dove all'inizio c'è la sinusoide e fino al bordo destro la linea dritta

codice:

 _________________________
|         LOGO            |
|                         |
|/\  /\___________________|
|  \/                     |
|                         |
|       CONTENUTO         |
|_________________________|

**Prill** · 10-03-2014, 23:25

Non ridimensionerei l'immagine da browser perché è inutile usare un'immagine più grande e pesante di quanto mi serve, ma anche perché non mi troverei poi con l'immagine di background
Guarda questo esempio con le immagine allegate da scaricare:

codice HTML:

<style type="text/css">
<!--
#bar{ width:100%; background:url(linea2.png) repeat-x;
}
-->
</style>
</head>
<body>
<div id="bar"><img src="onda1.png" alt="" /></div>

l'immagine della linea è alta quanto quella col battito, così non bisogna scervellarsi per l'allineamento

**matti96** · 11-03-2014, 16:32

Ciao, grazie, ho sostituito le immagini e messo quel codice, ma non si ripete l'immagine :\
http://theworldofprogrammers.altervista.org/sos/

**Prill** · 11-03-2014, 16:57

l'immagine si ripete, ma appare in alto nel div. Ricrea la striscia orizzontale con una immagine di altezza pari a quella di onda.png.
Se usi un'immagine più corta per la striscetta dovrai posizionarla coi css per far sì che vada ad attaccarsi precisamente all'altra immagine
L'esempio di partenza ce l'hai

**matti96** · 11-03-2014, 19:31

Ok, grazie, fatto, ho aggiunto nello style del div "position:absolute; left:0px;" in modo che l'onda appare attaccata al bordo. Ultima domandina: se rimpicciolisco la linea scompare, come mai?

EDIT: Non scompare*, intendevo che se rimpicciolisco la finestra, quando scorro con la barra orizzontale, la linea non arriva fino alla fine della pagina :\

Discussione: Immagine che si ripete

Strumenti discussione

Ricerca discussione

Visualizza

Immagine che si ripete

Permessi di invio