PDA

Visualizza la versione completa : 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


.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
<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()">
immagine.jpg
</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:




<!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">foglio.jpg</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 (http://www.ricmanx.com/blog/centrare-div-orizzontale-verticale-nella-pagina-orizzontalmente-verticalmente/) 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:

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;}
Loading