Estendere un div oltre la risoluzione di lavoro

w.t

Estendere un div oltre la risoluzione di lavoro

Salve,
sono impazzito per estendere un DIV nel mio sito oltre la risoluzione dell'area visibile.

es:

il mio monitor lavora a 1920px, oppure altri monitor che lavorano a risoluzioni inferiori
ho un immagine di 2200px
vorrei centrare l'immagine nello schermo ma non fare apparire la barra di scorrimento orizzontale

Come possi fare ??

Io ho fatto così ma non funzione, la barra appare...

CSS:


#divBG
{
 position:absolute;
 width:2200px;
 height:500px;
 left:50%;
 margin-left:-1100px;
 background:url(../images/bg_1.jpg) top left no-repeat;
}

HTML:


<div id="divBG"></div>

miwebdesign

In che senso scusa? Non capisco cosa vuoi dire con "vorrei centrare l'immagine nello schermo ma non fare apparire la barra di scorrimento orizzontale".

Come fai a centrare un'immagine che è più grande dell'area visibile del browser? è illogico

Se intendi togliere la barra di scroll del body puoi scrivere nel CSS

html,body{
overflow:hidden!important;
}

per il tuo DIV non so cosa dirti non mi è chiaro ciò che vuoi ottenere.

miwebdesign

Scusami ma devi specificare overflow-x e non oveflow per lo scroll orizzontale, scrivo qui perchè non posso più editare il messaggio.

w.t

Ho sempre utilizzato l'esempio che ho postato, la parte che non entra nella risoluzione attuale non veniva vista e basta, ora non so perchè non mi funziona più, l'ho usato per anni.

Con overflow-x non funziona.

Ho fatto così ora:


body{
  margin: 0;
}
#divBG{
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url(../images/bg_1.jpg) center no-repeat;
}

miwebdesign

Boh, non ne capisco il senso nell'utilizzo di sta roba ma se hai risolto il tuo problema ok!

w.t

Lo scopo è il seguente:

se vogliamo fare vedere uno sfondo a tutta pagina in orizzontale e 500px in verticale, tipo una fascia superiore, a gente che tiene una risoluzione orizzontale di 2200px, dovremmo avere uno sfondo di almeno 2200px o superiore, poi quando un utente che tiene risoluzione 1024px come potrebbe vedere lo sfondo di 2200px CENTRATO nel browser ??

miwebdesign

Potevi dirlo prima! ti consiglio una soluzione meno "spartana".



#divBG{  

 width: 100%;  

 height: 500px; 

  background: url(../images/bg_1.jpg) center center no-repeat;   

background-size:cover;

}

Così ti verra uno sfondo DIV Responsive, centrato sia verticalmente che orizzontalmente su un DIV largo tutta la finestra e alto 500px come hai detto prima.

Se vuoi aggiungere un tocco SWAG in più allo sfondo e se l'immagine è più alta di 500px aggiungi al DIV:


background-attachment:fixed;

Ed ottieni un bel Parallax!

Mentre se vuoi "Responsivizzare" anche l'immagine anzichè: background-size:cover; metterai:** background-size:100% auto;

**Attento alle proporzioni però!