mettere linee sopra i vari background

yabeforg

mettere linee sopra i vari background

mi sapete aiutare a spiegare come procedere per mettere delle linee gradienti (png trasparente) sui vari sfondi delle pagine, quando ci sono altre immagini già presenti?

nel senso mettere una immagine unica di sfondo e sopra di essa mettere un pattern png mettiamo di 15x15 px che ricopra esattamente tutto l'immagine.

ho pensato a questa soluzione ma non funziona:

html { background:url(images/background.jpg) }
body { background:url(images/gradient-lines.png) ;}

yabeforg

up

marinski

Fai prima a unire le due immagini con un programma di grafica (Photoshop) e caricarlo nel body singolarmente.

yabeforg

@Marinski said:

Fai prima a unire le due immagini con un programma di grafica (Photoshop) e caricarlo nel body singolarmente.

si quello è fattibile ma non posso in questo caso

marinski

Allora fissa lo sfondo nel body e il pattern in un div con margin:0, width:100% e height:100% e caricalo nell'html all'inizio del body per chiuderlo poi alla fine del body.

yabeforg

@Marinski said:

Allora fissa lo sfondo nel body e il pattern in un div con margin:0, width:100% e height:100% e caricalo nell'html all'inizio del body per chiuderlo poi alla fine del body.

la tua teoria è corretta, in pratica non esce però.... è dare l'altezza 100% che non esce


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
body{
	background:url(image.jpg)}
.pattern{
	background:url(gradient-lines.png);
	height:100%;
	width:100%;
	margin:0;}
</style>
</head>

<body>
<div class="pattern">prova</div>
</body>
</html>

marinski

In effetti è giusto così, è il body che comprende il corpo della pagina ed È solo da quello che puoi modificare correttamente uno sfondo!
Ti ripeto, meglio se unifichi lo sfondo con il pattern in un unica immagine che caricherai nel body! Arrenditi a questa soluzione...
Nel CSS3 sarà possibile utilizzare sfondi multipli, ma per ora viene letto solo da Safari e per il resto dei browser vale il CSS2.

Ultimo tentativo, inserire l'immagine di sfondo nel body con l'html
[html]<BODY BACKGROUND="image.jpg">[/html]
...e nel CSS il pattern sempre collegato al body, da cui puoi dare anche una trasparenza con l'opacity.

karedas

Ciao yabeforg

prova così':


.pattern{ 
background:url(gradient-lines.png);
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
margin:0;
}

yabeforg

@karedas said:

Ciao yabeforg

prova così':


.pattern{ 
background:url(gradient-lines.png);
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
margin:0;
}

infatti funziona! molte grazie