Newsgroup: it.lavoro.professioni.webmaster
Titolo: CSS: adattare foto-sfondo a larg.e riperete in vertic.

 scusate ma online ho trovato tanti esempi,ma non riesco a farne andare bene 
nessuno!
cmq si, sono neofita in css, cmq vengo al dunque.
ho una foto da mettere come sfondo, vorrei che fosse allineata a sinistra, 
che si ridimensionasse alla larghezza del browser, che si ripeta in 
verticale.
Ho provato vari esempi (ve li copio dopo) ma o non si allinea la foto, 
oppure se si allinea � compresa in un tag IMG e non riesco a scriverci sopra
COME FACCIO?!?
ecco quello che ho provato:
<style type="text/css">
<!--
html,body{
margin:0 auto;
background-width:100%;
background-height:100%;
padding: 0;
overflow: hidden;
background-image:url('SDC14528.JPG');
background-position:absolute;
background-repeat:repeat:y;
background-attachment:fixed;
}
-->
</style>
</head>
<body>
</body>
--------------------------------
altro:
<style type="text/css">
<!--
html,body{
margin:0 auto;
text-align:center;
}
#contenitore{
width:100%;
height:100%;
background-image:url('SDC14528.JPG');
background-position:absolute;
background-repeat:repeat:y;
position:absolute;
margin: 0;
padding: 0;
z-index: 1;
}
-->
</style>
</head>
<body>
<div id="contenitore"> </div>
--------------------------------------------
altro:
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#sfondo{
position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
z-index: 1;
} </style>
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); direction: 
ltr;"
alink="#000088" link="#0000ff" vlink="#ff0000">
<div
style="font-family: Arial,Helvetica,sans-serif; color: rgb(255, 0, 0); 
font-weight: normal; font-style: normal; text-transform: none;">
<img id="sfondo" src="SDC14528.JPG" alt=""></div>
<div>
<p>PROVA
</p>
</div>
<br>
</body>
scusate se magari non va bene il msg, fatemi sapere, perch� sono disperata e 
vado pure di fretta...sorry! 

 che si ripeta in verticale.
questo si può fare.
background-repeat: repeat-y;
in linea di massima *mai* dare per scontato che qualcosa che ad occhio
dovrebbe potersi fare si possa fare davvero, soprattutto quando si
tratta di css.


Ma anche con un uso intensivo di javascript non arrivi comunque al 
risultato.  Giusto per fare un esempio; determinare le dimensioni della 
finestra si pu� fare prima di caricare la pagina; ma dopo averla caricata, 
se modifichi le dimensioni della finestra del browser, il contenuto della 
pagina non viene aggiornato a meno che non sia stato fatto un refresh e 
quindi un ulteriore caricamento della pagina.
Una pagina web non � come una applicazione windows; almeno non adesso... in 
futuro chiss� :) Poi non so, magari sono un po' arretrato io :).
-- 
http://www.blueware.it
bluewarewebstudio (skype) 

 risultato.  Giusto per fare un esempio; determinare le dimensioni della
mah, a dire il vero, se ho capito bene cosa vuole fare l'op, ci si
dovrebbe riuscire.  tempo fa ho visto un plugin jquery che dovrei aver
messo tra i link della mia risposta che sostanzialmente lo faceva.  in
fondo si tratta di intercettare l'evento onResize, vedere quant'è
largo il viewscreen e dirlo all'immagine.  ma è comunque
un'elaborazione che va fatta in tempo reale, non è qualcosa che glielo
mandi a dire una volta per tutte con un css e e poi ci pensa lui.


[cut]
Occhio che GM vuole che si ridimensioni "in larghezza" (così ha
scritto).
Potrebbe usare del CSS solo per Gecko e Webkit/khtml, usando
'background-size: cover' e 'background-size: 100%', ma questo funziona
sia in verticale che orizzontale.
Altrimenti con JS come dici tu :)
Il codice che ha postato però contraddice ciò che chiede, perché se
vuole adattare solo in orizzontale (larghezza) allora non deve
impostare l'altezza.
Bisognerebbe vedere questa immagine che usa per capire meglio cosa
vorrebbe ottenere.
ciao,
Gabriele

 scritto).
sì, però dato il contesto io darei per scontato che vuole un
ridimensionamento proporzionale...


Allora non capisco perché ha aggiunto "che si ripeta in verticale." :)
Se si adatta all'intera schermata, allora non può ripetersi !
ciao,
Gabriele

 Se si adatta all'intera schermata, allora non può ripetersi !
forse se la pagina scrolla lui vorrà lo sfondo scrolli anch'esso...
GM, che ci dici?

 GM, che ci dici?
Eh sentiamo un po' che ci spieghi meglio!
ciao,
Gabriele

> GM, che ci dici?
Eh sentiamo un po' che ci spieghi meglio!
hehe :) grazie a tutti, sto studiando i link che mi avete postato!
nel frattempo sto facendo varie prove.....
il fatto � che (scusate se non l'ho detto prima) ho xp e uso firefox come 
browser, poi sto usando NVU come editor.
Adesso, quando mettevo gli stili css e mi ridimensionava l'immagie (sia vert 
che orizz) nel browser, in effetti quando nell'editor volevo scriverci del 
testo mi compariva la schermata bianca, come se lo sfondo scomparisse: in 
effetti nell'anteprima dell'editor scommpariva, ma ho letto sul sito che 
forse � un bug del programma, e quindi poi ho provato a scriverci ed in 
effetti va bene cos�, lo sfondo rimane.
Il testo va a finire in un tag DIV, insieme alle immagini che lo 
accompagnano.
Detto questo, ho cercato di chiarirmi le idee per lo sfondo.
Sicuramente in larghezza lo voglio ridimensionabile e sicuramente � solo il 
testo che deve scrollare.
Dovendo scrollare il testo.... � vero, lo sfondo rimane fisso, ok.
Per� mi ponevo  il problema: se per caso qualcuno usa un monitor pi� grande 
in lunghezza (boh problemi assurdi forse! ma � che sono pignola e valuto 
tutti i casi possibili) poi al di sotto dell'immagine PROPORZIONATA in 
larghezza, cosa ne esce fuori? risposta: il colore di sfondo. Ed allora, mi 
sono detta, perch� non metterci la ripetizione dell'immagine?
problemi inutili  =)
in tutto questo ora sto provando varie soluzioni, anche per quanto riguarda 
il testo...
che ne dite?
cmq vi tengo aggiornati ;)
grazie!

 sono detta, perchè non metterci la ripetizione dell'immagine?
Più grande in altezza, semmai :)
Ma sta immagine quanto misura ?
Ad ogni modo se usi le varie forme di 'background-size: 100% 100%' e
'background-size: cover' sei a posto per i browser basati su Webkit,
Gecko 1.9.2, Khtml e Opera.
Invece per IE a sto punto ti consiglio o di trovare un javascript o di
sostituire l'immagine con uno sfondo a gradiente.
ciao,
Gabriele

sostituire l'immagine con uno sfondo a gradiente.
scusa, sono ignorante...   il "background size cover" a cosa serve 
esattamente?
a ridimensionare la foto in vert.e orizz.?
cmq diciamo che per il javascript.... aehm.... non se ne parla per ora... 
vado di fretta e  non ho tempo per studiare anche js, purtroppo.
cmq con firefox va bene, riesco a ridimensionare l'immagine nei due versi, 
almeno cos� non � la perfezione ma di certo l'aquilone non semba molto 
deformato!
se volete vi passer� il link privatamente! :)

"GM" <INVALID> ha scritto nel messaggio 
news:4b79c477$0$1142$4faf...@reader1.news.tin.it...

mmm.... tutto bene (con firefox) tranne per un paticolare... con IE non va 
bene niete!!! in effetti lo sfondo non si riadatta!!! � fisso!!!!  e mo'?!
X-(((