CSS: ridimensionare l'immagine di sfondo in giù se più grande della finestra, mantenere al 100% altrimenti

Mi piacerebbe distribuire un'immagine di sfondo nel corpo del mio sito web che si ridimensiona con la risoluzione della finestra, ma non si ingrandisce oltre il suo originale dimensione (1920x1080). In questo modo, gli utenti con risoluzioni più piccole possono ancora vedere l'intera immagine, ma quelli oltre non hanno un brutto sfondo upscaled.CSS: ridimensionare l'immagine di sfondo in giù se più grande della finestra, mantenere al 100% altrimenti

Non sembra che le immagini di sfondo supportino proprietà come max-width, che userei di solito per uno scopo del genere.

Quale potrebbe essere la soluzione? Questo è possibile in CSS senza scripting extra?

fonte

2013-10-30 ividyon

molto più probabilmente avresti bisogno di jquery/javascript –

userei un div come un involucro con un max-width e impostare lo sfondo che div.

HTML

<body> 
<div class="container">Content</div> 
</body>

CSS

.container { 
    width: 100%; 
    max-width: 1920px; /* YOUR BG MAX SIZE */ 
    background:url("bg.png") no-repeat; 
    background-size: 100%; 
}

fonte

2013-10-30 13:29:50 jensborje

Si potrebbe provare a creare un <img> tag HTML con uno specifico id

esempio

HTML

<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />

CSS

img#mybg { 
    position: fixed; //image will always be top: 0 left: 0 by default. 
    display: block; //make it a block for width to work. 
    width: 100%; //set default width 
    height: 100%; //set default height 
    max-width: 1920px; //set max width 
    max-height: 1080px; //set max height 
    z-index: -999999; //set z-index so it won't overlap any other element. 
}

Per centrare dinamica si dovrà usare JavaScript in combinazione con un evento window.onresize.

Se avete bisogno di ulteriori informazioni, modificheremo il mio post di conseguenza.

Una buona alternativa che è molto facile da usare (ma allunga lo sfondo) sarebbe quella di utilizzare jquery backstretch plugin. Ti permette semplicemente di aggiungere un'immagine di sfondo a schermo intero, che si ridimensionerà con la risoluzione (che non è esattamente quello che vuoi, ma la migliore alternativa che potrei pensare).

fonte

2013-10-30 12:47:44 SidOfc

Puoi provare in questo modo. Qualsiasi risoluzione dell'immagine dimensione funzionerà come reattivo:

img#mybg { 
    position: fixed; //image will always be top: 0 left: 0 by default. 
    display: block; //make it a block for width to work. 
    width: 100%; //set default width 
    height: 100%; //set default height 
    max-width: 1920px; //set max width 
    max-height: 1080px; //set max height 
    z-index: -999999; //set z-index so it won't overlap any other element. 
    background-size:100% 100%; 
}

fonte

2013-10-30 12:53:23 vadlamani

Basta davvero un piccolo/suggerimento veloce:

A seconda di come appare, e tutto confluisce, background-size:contain; potrebbe essere un opzione.

oppure, sul tuo corpo, imposta la larghezza massima su 1920, imposta i margini su automatico e questo potrebbe funzionare anche per te.

fonte

2013-10-30 13:36:04 ndugger

CSS: ridimensionare l'immagine di sfondo in giù se più grande della finestra, mantenere al 100% altrimenti

risposta

Problemi correlati