- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Come adattare un'immagine bloccandola nello sfondo?
-
Come adattare un'immagine bloccandola nello sfondo?
Vorrei mettere come sfondo un'immagine, bloccandoloa ossia non permettendo lo scroll...fin qui è semplice basta usare il tag fixed...
Il punto è che devo mettere un'immagine bella grande, xkè se un utente ha uno schermo con risoluzione maggiore dell'immagine si vedrebbero i bordi nello spazio mancante...
Un'altra cosa è che l'immagine è allineata in alto a sinistra e per il pezzo eccedente lo schermo viene tagliata...ossia avendo un'immagine 15001200 (esempio) ed ho come risoluzione nel mio schermo 12801024 nella finestra del browser tale immagine risulterà mancante di un pezzo...
Vorrei fare in modo che l'immagine si autoscalasse tenendo conto delle proporzioni...ma come fare?
-
Posto un'esempio per capire se è ciò che stai cercando. In questo esempio anche con il ridimensionamento della finestra l'immagine si auto-adatta.
[html]
<html>
<head>
<style>
#sfondo
{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<img id="sfondo" src="download.giorgiotave.it/sfondi/paesaggi/Sfondi 089.jpg" alt="Sfondo preso dalle risorse di Giorgio Tave" /></body>
</html>note: correggi il link;
[/html]
-
Ciao Morris
L'esempio postato da $BsW$ può essere funzionale.
Attenzione però che i browser nel ridimensionare automaticamente le immagini, grazie ai valori in percentuale, creano dei problematici effetti alla visualizzazione delle stesse come sfocature o disallineamenti dei pixel.Quindi valuta bene cosa utilizzare
-
@karedas said:
Attenzione però che i browser nel ridimensionare automaticamente le immagini, grazie ai valori in percentuale, creano dei problematici effetti alla visualizzazione delle stesse come sfocature o disallineamenti dei pixel.
E quindi per utilizzare il ridimensionamento, cercando di evitare questi problemi come dovrei agire?
-
La soluzione è appunto utilizzare un'immagine abbastanza grande da evitare la necessità della scalatura
Il fatto è che appunto i browser non utilizzano l'auto-correzione dei pixel come un normale Photoshop durante la scalatura dell'immagine , quindi è una forte ma anche ovvia limitazione.Almeno io non so darti una risposta risolutiva purchè vi sia
