Precedente :: Successivo |
Autore |
Messaggio |
dinogel Eroe


Registrato: 07/09/05 11:42 Messaggi: 55 Residenza: Milano
|
Inviato: 05 Feb 2007 13:02 Oggetto: Resize immagine dello sfondo |
|
|
Perso!
Ho perso i riferimenti a delle istruzioni che ho trovato giorni fa per adattare automaticamente in html l'immagine dello sfondo in funzione delle varie risoluzioni.
In soldoni io ho un'immagine di fondo che a 800x600 copre tutta la pagina.
Se però viene vista ad altre risoluzioni ho la parziale ripetizione dell'immagine per la parte che non viene ricoperta dalla stessa.
A 1280x800 la faccenda si fa drammatica.
Chi mi aiuta?
Grazie |
|
Top |
|
 |
kluster Dio maturo

Registrato: 15/04/06 13:14 Messaggi: 2898
|
Inviato: 05 Feb 2007 13:16 Oggetto: |
|
|
Allora, devi personalizzare lo sfondo tramite css.
tra il tag HEAD metti questo:
Codice: |
<style type="text/css">
BODY
{
background-attachment: fixed;
background-image: url(/TUOCARTELLA/TUA_IMMAGINE);
background-repeat: no-repeat;
background-position: top center;
}
</style>
|
in particolare:
background-image:url('IMMAGINE') inserisce come è facile dedurre l'immagine nello sfondo.
background-attachment puo' essere fixed o scroll.
Identifica come l'immagine è collegata alla pagina.
fixed se la pagina scrolla, l'immagine invece rimane fissa nella sua posizione iniziale e i contenuti invece ci scrollano sopra
scroll invece l'immagine scorre come se fosse una normale immagine inserita nel body
background-repeat: no-repeat |repeat | repeat-x | repeat-y
server per la ripetizione dell'immagine per riempire lo spazio del body.
repeat-x ripete sulla coordinanate x (quindi ripetizione orizzontale)
repeat-y ripete sulle coordinate y (quindi ripetizione verticale)
repeat ripete sia su x che su y
no-repeat inserisce l'immagine 1 volta sola e non ripete.
background-position: [POSIZIONE_ORIZZONTALE] [POSITIONE_VERTICALE]
imposta la dimensione di piazzamento dell'immagine.
Quindi
background-position: center center, posiziona l'immagine al centro del body in orizzontale ed in verticale.
background-position: top left, posiziona l'immagine in alto allineata a sinistra
background-position: 100px 273px, posiziona l'immagine a 100px dal top e a 273px a sinistra.
background-position:50% 50%, posiziona l'immagine alla meta' dell'altezza e alla meta' della larghezza del body. |
|
Top |
|
 |
dinogel Eroe


Registrato: 07/09/05 11:42 Messaggi: 55 Residenza: Milano
|
Inviato: 05 Feb 2007 14:31 Oggetto: |
|
|
Grazie, provo e poi ti dirò.
Ciao. |
|
Top |
|
 |
dinogel Eroe


Registrato: 07/09/05 11:42 Messaggi: 55 Residenza: Milano
|
Inviato: 05 Feb 2007 15:22 Oggetto: Immagine centrale |
|
|
Ciao, purtroppo non funge.
Forse sono io che scrivo male, ma tuttavia se copio le tue istruzioni nel blocconote e poi li rimetto dopo HEAD, al salvataggio le righe si spostano e non mantengono la struttura iniziale, classico quando vi è errore.
Comunque mi sembra di capire, avendo già nella pagina un altro STYLE, che è meglio creare un foglio css esterno, e richiamarlo dalla pagina interessata.
Ho provato anche questa soluzione, ma il codice non è accettato cosi com'è scritto e si ... "smonta" come sopra.
Come hai capito non sono un mago, ....mi arrangio come posso.
Aspetto news.
Ciao |
|
Top |
|
 |
kluster Dio maturo

Registrato: 15/04/06 13:14 Messaggi: 2898
|
Inviato: 05 Feb 2007 16:59 Oggetto: |
|
|
passa il link dove hai montato la pagina, vedo un attimo, al massimo butta qui le righe di codice dello stile [non tutta la pagina]
Ciao |
|
Top |
|
 |
dinogel Eroe


Registrato: 07/09/05 11:42 Messaggi: 55 Residenza: Milano
|
Inviato: 05 Feb 2007 18:01 Oggetto: Resize Immagine di fondo |
|
|
Questo è l'inizio pagina.
C'è uno style relativo ad un file audio:
<head>
<title>Pagina Home</title>
<meta name="Keywords" content="Strumenti di misura">
<meta name="Description" content="Strumenti di Misura">
<meta name="Author" content="postmaster">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta http-equiv="Content-Language" content="it">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<bgsound src="BuonGiorno.mp3" loop="0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style>
<!--
bgsound { }
-->
</style>
</head>
<body background="images/immaginesfondo.jpg" leftmargin="12">
<div align="left">
<table border="0" width="756" height="417" cellspacing="0" cellpadding="0">
<tr>
ecc......
Ciao. |
|
Top |
|
 |
kluster Dio maturo

Registrato: 15/04/06 13:14 Messaggi: 2898
|
Inviato: 05 Feb 2007 18:22 Oggetto: |
|
|
mamma mia cosa ho visto, lavori con FrontPage.
, scherzo via, è solo un mio punto di vista.
A parte gli scherzi.
correggi
<body background="images/immaginesfondo.jpg" leftmargin="12">
in semplice
<body>
e
<style>
<!--
bgsound { }
-->
</style>
in
Codice: |
<style type="text/css">
<!--
bgsound { }
BODY
{
margin:0;
padding: 0px 12px 0px 0px;
background-image:Url('images/immaginesfondo.jpg');
background-position:top center;
background-repeat:no-repeat;
}
-->
</style>
|
|
|
Top |
|
 |
dinogel Eroe


Registrato: 07/09/05 11:42 Messaggi: 55 Residenza: Milano
|
Inviato: 05 Feb 2007 19:07 Oggetto: resize immagine |
|
|
Be,
ti avevo avvertito che non ero uno smanettone, e dato che il mio lavoro principale è più su hardware, FrontPage viene utilizzato perchè è semplice e abbastanza veloce. (per me)
Capisco che non è il massimo oggi, anzi... ma non ho il tempo materiale, almeno per ora, per altri editori più performanti.
Grazie per la risposta. Mercoledi provo il tutto e poi ti rispondo.
Riciao |
|
Top |
|
 |
kluster Dio maturo

Registrato: 15/04/06 13:14 Messaggi: 2898
|
Inviato: 05 Feb 2007 19:19 Oggetto: Re: resize immagine |
|
|
dinogel ha scritto: | Be,
ti avevo avvertito che non ero uno smanettone, e dato che il mio lavoro principale è più su hardware, FrontPage viene utilizzato perchè è semplice e abbastanza veloce. (per me)
Capisco che non è il massimo oggi, anzi... ma non ho il tempo materiale, almeno per ora, per altri editori più performanti.
|
ma si, ci mancherebbe, scherzavo ognuno deve lavorare con il prodotto che gli permette il massimo risultato con il minimo sforzo. |
|
Top |
|
 |
dinogel Eroe


Registrato: 07/09/05 11:42 Messaggi: 55 Residenza: Milano
|
Inviato: 07 Feb 2007 15:51 Oggetto: |
|
|
Ciao,
responso dopo le prove: non ci siamo.
Ovvero, il codice una volta salvata la pagina si presenta con questo layout:
Citazione: | <style type="text/css">
<!--
bgsound { }
body { background-image: url('images/NotteMare_1024x768.jpg'); background-repeat:
no-repeat; margin: 0; padding-left: 0px; padding-right: 12px;
padding-top: 0px; padding-bottom: 0px; background-position:
top center }
-->
</style> |
ovvero si smonta.
Il risultato è che l?immagine NotteMare_1024x768 pixel, è parziale con 800x600; è perfetta con 1024x800; ha bordi bianchi laterali con 1024x768.
Che fare?
Ciao. |
|
Top |
|
 |
horus Macchinista


Registrato: 22/03/05 10:48 Messaggi: 2554 Residenza: Sirio e dintorni
|
Inviato: 07 Feb 2007 16:43 Oggetto: |
|
|
Con i CSS non si può fare quello che vuoi. E' previsto un background-size in CSS3 ma prima che sia supportato da tutti i browser passeranno anni se non decenni.
Ci potrebbero essere alternative tipo usare un div come contenitore del tutto e mettere un'immagine in quello settando le dimensioni in percentuali oppure con qualche script lato client. |
|
Top |
|
 |
dinogel Eroe


Registrato: 07/09/05 11:42 Messaggi: 55 Residenza: Milano
|
Inviato: 07 Feb 2007 18:22 Oggetto: E' possibile |
|
|
Carissimo Horus,
Punto 1 - Dal mio primo post si evvince che la cosa è possibilissima, l'ho vista, ma che ho perso i riferimenti per farla.
Punto 2 - Non ho mai richiesto che la funzione fosse universale per tutti i
browser, mi basta IE.
Punto 3 - Non ho detto che deve essere fatta con CSS.
Punto 4 Finale. - In definitiva hai dato qualche aiuto, ma ....in pratica?
Salutoni |
|
Top |
|
 |
SverX Supervisor Macchinisti


Registrato: 25/03/02 12:16 Messaggi: 11810 Residenza: Tokelau
|
Inviato: 08 Feb 2007 15:57 Oggetto: Re: E' possibile |
|
|
se qualunque soluzione vale allora potresti preparare 3 immagini diverse e impostare come sfondo quella adeguata via Javascript... |
|
Top |
|
 |
horus Macchinista


Registrato: 22/03/05 10:48 Messaggi: 2554 Residenza: Sirio e dintorni
|
Inviato: 15 Feb 2007 17:11 Oggetto: |
|
|
Punto 1 e 3 - Infatti ho detto che con i CSS non era possibile farla. Visto che kluster suggeriva soluzioni CSS mi sembrava doveroso precisare che non si potesse fare con quel metodo prima che lui diventasse matto a cercare di risovere il tuo problema.
Punto 2 - Non hai neppure detto che doveva essere specifica di IE, hai solo parlato di html (che non mi risulta essere proprietario di un browser in particolare).
Punto 4 - In pratica ti ho suggerito alcune vie da approfondire: div con dimensioni in percentuale o script lato client (poi parzialmente approfondito da SverX). Non so cosa avevi visto e non mi viene in mente nessun altro modo per adattare automaticamente in html (visto che stiamo interpretando alla lettera i messaggi) un'immagine di sfondo.
Quello che cercavo di suggerire era una soluzione elegante che andasse bene su un sito web potenzialmente accessibile da tutti. Se tu hai esigenze specifiche e i miei suggerimenti non ti hanno aiutato (o se ti hanno infastidito) mi dispiace, prova a specificare più nel dettaglio quali sono i requisiti di quello che cerchi e magari i suggerimenti saranno più mirati. |
|
Top |
|
 |
|