Non fa ripetere un'immagine di sfondo

**quit10** · 03-06-2009, 20:05

Ciao a tutti! So che questa domanda sarà davvero stupida, ma sono un principiante: come faccio ad impostare una immagine di sfondo senza che si ripeta? Il problema è che si tratta di un immagine abbastanza piccola, ma non voglio che si ripeta, voglio che si ingrandisca fino a coprire tutta la pagina, o perlomeno impostare la sua grandezza ad una certa percentuale della pagina dell'utente. Grazie mille!

**mucu** · 03-06-2009, 20:33

una cosa è non far ripetere un'immagine
un'altra è deformarla a piacimento
per la prima parte si possono comodamente usare i css

Codice PHP:


.latuaregola o il tuo tag o il tuo id {

   background-image: url(image.jpg);

   background-repeat: no-repeat

}

per la seconda ho sentito dire che si può fare con javascript, ma devi apettare qualcun altro per il suggerimento

**ant_alt** · 04-06-2009, 01:17

Codice PHP:


<html>

<head>

<style>*{margin:0}

</style>

<script>

function resizeimg(){

    var i=document.getElementsByTagName('img')[0];

    i.width=window.innerWidth;

    i.height=window.innerHeight;

    }

    </script>

</head>

<body onload="resizeimg()"onresize="resizeimg()">

[img]immagine.jpg[/img]

</body>

</html>

ti ho preparato questo script che ridimensiona un'immagine, sinceramente non credo che si possa fare con lo sfondo, ma con il posizionamento assoluto risolvi la questione

ps: come era prevedibile l'effetto è fastidioso e non ne vedo l'utilità

**quit10** · 04-06-2009, 13:55

Grazie mille a tutti e due!!
Ho risolto il tutto con questo script:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {margin:0;
padding:0;
}

.sfondo {heigth:100%}
.sfondo img {width:100%;
height:100%}
.normale {position:absolute;
top:0;
left:0
}
</style>
</head>
<body>
<div class="sfondo">[img]foglio.jpg[/img]</div>
<div class="normale">
<div>
Qui il contenuto(tabella)
</div>
</div>
</body>
</html>

Anche se l'immagine non è prpriamente uno sfondo il risultato è uguale. Adesso però ho il mio sfondo (è un foglio di carta), dove devo mettere una tabella, che deve stare esattamente su una certa porzione dell'immagine di sfondo. Adesso mi interessa sapere come posso decidere la posiuzione della tabella, rifacendomi alle dimensioni dello schermo, ad esempio decidere che la mia tabella deve essere posizionata al 50% sdella pagina.

Qualcuno sa dirmi come fare?

Grazie ancora per l'aiuto!

**ricman** · 04-06-2009, 15:16

Originariamente inviato da quit10
che la mia tabella deve essere posizionata al 50% sdella pagina.

Qui trovi un po' di codice per centrare un elemento. E in fondo un altro link utile.

**quit10** · 04-06-2009, 21:25

Grazie mille! Adesso però ho un problema con i margini: se io imposto il margine sinistro ad esempio a 90% ho notato che sia con firefox che con safari le scritte partono circa da metà della pagina. Poi ho provato ad aumentare oltre il 100%, in safari funzionea esattamente come se 90% fosse la metà, quindi per posizionare la scritta al 90% della pagina mi è bastato scrivere ad esempio 120%. Con firefox però la scritta viene posta effettivamente a. 120% della pagina. Non so proprio come fare... Qualcuno sa darmi un modo più "sicuro" per posizionare una scritta circa in alto a destra?
Grazie mille!

**ricman** · 04-06-2009, 22:51

Una scritta in alto a destra? ...rispetto a cosa?
...sennò basta il float:right

**quit10** · 05-06-2009, 14:50

Stò creando un sito, la homepage è rappresentata da un foglio a righe, voglio che la data sia sistemata in alto a destra: non so proprio come fare, puoi spiegarmi come funziona float:right, fa parte dei CSS?

**Federix** · 05-06-2009, 15:04

Sposto in CSS

**ricman** · 06-06-2009, 10:51

Originariamente inviato da quit10
Stò creando un sito, la homepage è rappresentata da un foglio a righe, voglio che la data sia sistemata in alto a destra: non so proprio come fare, puoi spiegarmi come funziona float:right, fa parte dei CSS?

Ma allora ti basta un div con "text-align:right"....

La struttura sarà del tipo:

codice:

HTML
<body>
  <div id="data">

10/10/2001</p></div>
  <div id="contenuto">........</div>


CSS
#data {text-align:right}
#data p {color:red;font-size:10px;}

Discussione: Non fa ripetere un'immagine di sfondo

Strumenti discussione

Ricerca discussione

Visualizza

Non fa ripetere un'immagine di sfondo

Permessi di invio