Quello che è un buon modo per mostrare immagini di sfondo di grandi dimensioni su css

Ho chiesto a uno question di specificare ciò che era specifico del mio codice e le persone erano davvero utili, quindi ho scelto la risposta più sospetta, anche se non ho risolto il problema .Quello che è un buon modo per mostrare immagini di sfondo di grandi dimensioni su css

Sto cercando di ottenere un grande background css proprio come ha livingsocial.
Ho un'immagine che è 1400 x 1050
La mia risoluzione corrente è: 1280 x 1024
La mia immagine mantiene sempre tagliato fuori dal fondo

Question (s): Whats il modo migliore per visualizzare sfondi di grandi dimensioni usando css?

Ho bisogno di avere la stessa immagine di sfondo in 4 diverse risoluzioni e quindi utilizzare l'immagine che meglio si adatta alla risoluzione corrente dell'utente sta usando (c'è qualche script per esso)?
Ho bisogno solo di una grande immagine che continuo a ridimensionare usando css
Come gli altri stanno affrontando questo problema?

Sono interessato a sapere qual è il modo migliore per farlo in modo che funzioni bene in tutte le risoluzioni delle tre opzioni di cui sopra.

fonte

2011-08-16 yogashi

In genere le parti dello sfondo sono univoche, ma assicurati che i bordi siano uniformi in modo che la risoluzione non costituisca un problema. Per verificare se il tuo progetto funziona, rimpicciolisci la pagina. –

Un'immagine di 1400x1050 se ridimensionata a 1280 di larghezza sarà alta 960. E 'quello che stai vedendo? – James

Non lo so ... ma viene interrotto in fondo. Non l'ho ancora ridimensionato. – yogashi

CSS3 Soluzione Si potrebbe utilizzare background-origin e background-size in CSS3, ma non è supportato da IE8 e inferiore.

Soluzione PHP Si potrebbe GD2 scalare l'immagine specifica per il browser degli utenti, questa soluzione comporterebbe anche JavaScript.

vita sociale Way Stanno inserendo un'immagine con il tag <img/> e posizionandolo fisso.

<style type="text/css"> 
#background { 
    z-index: -1; /* put it under everything*/ 
    position: fixed; /* make it stay in the same place, regardless of scrolling */ 
    top: 0; 
    left: 0; 
    overflow: hidden; /* clip the image */ 
    width: 100%; /* fill the full width of browser */ 
    min-height: 950px; /* show at least this much of the image */ 
} 
#background img { 
    width: 100%; 
} 
</style> 

<body> 
    <div id="background"><img /></div> 
    <div id="content"><!-- Your Content Here --></div> 
</body>

vita sociale ha un po 'di codice applicato alla loro etichetta <img/>, ma sembra una sorta di ridondante, forse è per un miglior supporto cross-browser, non ho fatto vedere qui.

fonte

2011-08-16 17:13:15

grazie per aver spiegato il CSS. Tuttavia, provando la loro tecnica la mia immagine viene tagliata dal basso: http://jsbin.com/opokev/28 Potrebbe essere il caso di "overflow: hidden" ma quale dovrebbe essere la mia risoluzione? devo ridimensionare la mia immagine in modo che non venga tagliata? – yogashi

'overflow: hidden' è ciò che ne causa il blocco, così come' position: fixed' l'idea è che lo sfondo occupa solo lo spazio di cui ha bisogno, né più né meno, questo è ciò che Living Social è facendo. –

Ecco il codice modificato, usando il mio esempio dalla mia nuova risposta. http://jsbin.com/opokev/33 –

Provare a specificare la larghezza e l'altezza dell'immagine, quindi se l'immagine è tagliata al centro dell'immagine. In caso contrario, l'immagine verrà tagliata a seconda delle dimensioni dello schermo; O allungato, se si imposta la dimensione di esso per abbinare le dimensioni dello schermo.

fonte

2011-08-16 17:01:32

CSS "background" non consente di specificare la dimensione di ridimensionamento per l'immagine. http://www.w3schools.com/css/css_background.asp –

corretto. Dovrebbe effettivamente usare l'HTML per quello. –

Per essere più precisi, i CSS2 non ti permettono di farlo, come fa CSS3. CSS3 è supportato da tutti i principali browser, tra cui IE9. Nessun supporto per IE8 e sotto però. –

Google: immagine di sfondo css autosize http://css-tricks.com/3458-perfect-full-page-background-image/

fonte

2011-08-16 17:19:02

Non sono a conoscenza di un metodo CSS che permetterà di conseguire sfondo crossbrowser .. che in realtà lavora in versioni di IE inferiori.

Tuttavia ci sono alcuni plugin jQuery là fuori, come questo:

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

fonte

2011-08-16 17:48:52 Joonas

ho deciso di rispondere a questa domanda ancora una volta, dato il diverso insieme di requisiti, entrambi sono validi; tuttavia, questo indirizzo in particolare se si DO si desidera che l'immagine venga tagliata nella parte inferiore.

DEMO:http://wecodesign.com/demos/stackoverflow-7082174.htm

<style type="text/css"> 
#background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1;  
} 
#contentContainer { 
    position: relative; 
    width: 500px; 
    height: 500px; 
} 
#theContent { 
    /* this is all pretty much just to make it look good, nothing important in here */ 
    position: absolute; 
    top: 200px; 
    left: 200px; 
    background: #FFF; 
    width: 80px; 
    height: 80px; 
    opacity: 0.7; 
    border-radius: 6px; 
    padding: 10px; 
} 
</style> 

<div id="contentContainer"> 
    <img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" /> 
    <div id="theContent">This is the content</div> 
</div>

fonte

2011-08-16 18:13:28

ho appena messo a nudo il codice dal vivere sociale e pensato che sarebbe stato utile se lo metto qui:

<div id="landing-page-container"> 
    <div id="background-container"> 
    <div> 
     <img alt="background" id="background" src="files/background.jpg"> 

    </div> 
    </div> 

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

e qui è il vostro css:

html {width: 100%; height: 100%} 
body {width: 100%; height: 100%} 
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1} 
#background-container {width: 100%; height: 100%; position: absolute} 
#background {width: 100%; height: auto; z-index: -100}

e naturalmente è necessario fornire il vostro background.jpg

fonte

2011-12-27 20:46:21 iMad

Quello che è un buon modo per mostrare immagini di sfondo di grandi dimensioni su css

risposta

Problemi correlati