Immagini allungate e contenuto centrato con Bootstrap

È necessario disporre una pagina Web con due immagini che devono essere allungate per riempire la finestra del browser disponibile, ma con il contenuto del testo centrato nella pagina. Finora, l'unico modo in cui mi sembra di essere in grado di farlo sono: a) combinare le due immagini in una sola e impostarla come immagine di sfondo per body, quindi posizionare con cura verticalmente la banda centrale del contenuto per adattarla allo spazio tra le immagini , oppure, b) per nidificare un div container (fisso) all'interno di uno container-fluid che regge l'immagine e fissa tenendo il contenuto del testo. Tuttavia, ho visto terribili avvertimenti e disprezzo riversarsi su coloro che sostengono i contenitori di bootstrap che nidificano.Immagini allungate e contenuto centrato con Bootstrap

Questa immagine potrebbe aiutare a trasmettere quello che mi serve:

enter image description here

'Immagine 1' deve allungare in tutta l'intera finestra, con il contenuto rimanendo centrato, lo stesso con 'Immagine 2', con una pianura banda di bianco in verticale tra le immagini, e una semplice banda di grigio proprio sullo schermo in basso.

fonte

2015-04-19 ProfK

utilizzare il posizionamento assoluto per il div contenuti – Awena

Si potrebbe provare a farlo in questo modo:

http://jsfiddle.net/kqoonr24/1/

Potrebbe essere necessario adattarlo alle proprie esigenze, ma questa è l'idea di base. :-)

Fondamentalmente, ti consigliamo di avere un div che funge da sfondo e ospita le div individuali che compongono ogni elemento di sfondo.

Quindi, successivamente, è necessario disporre di un div in primo piano che contenga il contenuto effettivo.

html, 
 
body, 
 
.wrapper, 
 
.foreground, 
 
.background { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.foreground { 
 
    background-color: green; 
 
    max-width: 400px; 
 
    margin: 0 auto; 
 
} 
 
.background { 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 
.background > * { 
 
    height: 33%; 
 
    content: ''; 
 
} 
 
.background-element-1 { 
 
    background-color: blue; 
 
} 
 
.background-element-2 { 
 
    background-color: red; 
 
} 
 
.background-element-3 { 
 
    background-color: orange; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div class="background"> 
 
     <div class="background-element-1"></div> 
 
     <div class="background-element-2"></div> 
 
     <div class="background-element-3"></div> 
 
    </div> 
 
    <div class="foreground"> 
 
     <div class="foreground-inner"> 
 
     I am your text! 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

È probabile che sia necessario regolare come ho fatto un bel po 'ipotesi-fatemi sapere se avete bisogno di più aiuto.

fonte

2015-04-19 06:41:52

Grazie @Nikk, sembra che ci vorrà qualche aggiustamento, come le vostre classi suggeriti non tengono conto per le classi bootstrap esistenti, come 'container' per il 'primo piano 'roba, ma vedrò cosa posso fare. – ProfK

Sì. Dovrai modificare le classi css e html per rispecchiare quelle del bootstrap. Stavo solo cercando di darti un'idea generale :-) –

Puoi provare questo.

Nota che è necessario applicare alcuni css personalizzati come richiesto dalle esigenze di progettazione. Seguire l'esempio:

.container-fluid { 
 
    padding: 0; 
 
} 
 
.container-fluid.wrapper { 
 
    padding-top: 100px; 
 
} 
 
.ht33 { 
 
    height: 200px; 
 
} 
 
.container.content { 
 
    width: 970px; 
 
    position: absolute; 
 
    height: 800px; 
 
    background: gray; 
 
    color: #fff; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<div class="container-fluid wrapper"> 
 
    <div class="container content"></div> 
 
    <div class="container-fluid bg-primary ht33"></div> 
 
    <div class="container-fluid bg-warning ht33"></div> 
 
    <div class="container-fluid bg-danger ht33"></div> 
 
</div>

Screenshot

fonte

2015-04-23 06:16:50 webtuts4u

Grazie. Quindi sembra che dovrò nidificare div contenitore dopo tutto. – ProfK

Ho usato row classe al BGs di avere una griglia si sentono su di loro e anche eliminare l'imbottitura.

HTML

<div class="container-fluid wrapper"> 
    <div class="container content bg-primary"></div> 
    <div class="row bg-success bg"></div>   
    <div class="row bg-warning bg"></div>   
    <div class="row bg-danger bg"></div>   
</div>

CSS

.container-fluid.wrapper { 
    padding-top: 100px; 
} 
.bg { 
    height: 200px; 
} 
.container.content { 
    width: 970px; 
    position: absolute; 
    height: 800px; 
    color: #fff; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
}

fonte

2015-04-27 07:10:24

L'esempio più semplice che io possa pensare, ho pensato che non conosce la dimensione delle immagini di sfondo, è per questo che posizionali all'interno del div di sfondo che non influisce sul flusso della pagina, mentre in alto c'è il contenuto naturale

Demo

<div class="images-wrapper"> 
    <img src="..." alt=""> 
    <img src="..." alt=""> 
</div> 

<div class="container"> 
     ....... 
</div> <!-- /container --> 

body { 
    background:#ccc; 
} 
.images-wrapper { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    background:#fff; 
    z-index:0; 
} 
.images-wrapper img { 
    display:block; 
    width:100%; 
    height:auto; 
    margin-top:30px; 
} 

.container { 
    z-index:2; 
    position:relative; 
    background:#fff; 
}

fonte

2015-04-28 17:38:25

E come non so se ho capito bene, date un'occhiata anche a questo: http://jsfiddle.net/7obaL8pw/3/ –

Immagini allungate e contenuto centrato con Bootstrap

risposta

Problemi correlati