html - Twitter Bootstrap 3 - Columns "inside" an image -
i trying display 3 columns on top of image. i have avoid setting image background-image in css, achieve having <img> element on top of there 3 columns.
i tried putting image 12-wide column (col-md-12) , inside column creating row of 3 4-wide (col-md-4) columns.
in example below can see have 6 columns in 2 rows. first row has 2 empty columns , 1 column "test" inside it, each 4-wide (col-md-4). whenever set <img> position:absolute i want first row go on top of image. sadly, both of rows go up.
my html:
<div class="container"> <div class="row"> <div class="col-md-12"> <img class="img-responsive featured" src="http://www.backgroundsy.com/file/large/red-coffee-cup.jpg" /> <div class="row"> <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> </div> <div class="col-md-4 col-sm-6 hidden-xs"> </div> <div class="col-md-4 col-sm-6 hidden-xs"> test </div> </div> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6 post"> <h4>blahblah</h4> <p>blaah</p> </div> <div class="col-md-4 col-sm-6 post"> <h4>blahblah</h4> <p>blaah</p> </div> <div class="col-md-4 col-sm-6 post"> <h4>blahblah</h4> <p>blaah</p> </div> </div> </div> my css (position:absolute commented out, please remove comment tags see happens, want first row on top of image):
body { padding-top: 50px; } .featured { /* position:absolute; */ } is there fault-proof method make work , make cross-browser possible?
the parent of absolutely positioned element needs height of absolutely positioned element @ given point in order content below not affected. read on why when learn absolute, fixed, static, , relative positioning. knowledge part of basic css: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
since using responsive image, height variable. have keep parent open somehow , has fluid height. can use padding-top on pseudo element , position image , content inside area image positioned in background. you need adjust based on image each value specific situation , not generic situations.
learn aspect ratio: http://www.fredparke.com/blog/css-padding-trick-responsive-intrinsic-ratios
demo: http://jsbin.com/vijagu/1/
your viewport must greater or equal min-width css used. under that, need create solution such leave alone or adjust values , make other media queries.
http://jsbin.com/vijagu/1/edit
html (your code had 18 col per row, it's 12. , don't need nest have have done.)
<div class="container"> <div class="row img-row"> <div class="content"> <div class="col-md-4">column 1 text goes here text goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes here </div> <div class="col-md-4">2 text goes here text goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes here </div> <div class="col-md-4">3 text goes here text goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes heretext goes here </div> <img class="img-responsive" src="http://www.backgroundsy.com/file/large/red-coffee-cup.jpg"> </div> </div> <!-- second row --> <div class="row"> <div class="col-md-4 post"> <h4>blahblah</h4> <p>blaah</p> </div> <div class="col-md-4 post"> <h4>blahblah</h4> <p>blaah</p> </div> <div class="col-md-4 post"> <h4>blahblah</h4> <p>blaah</p> </div> </div> </div> css:
@media (min-width:992px) { .img-row { position: relative } .img-row .content > img { margin-top: -20%; position:absolute; z-index:-1; } .img-row:before { padding-top: 75%; display: block; content: ""; } .content { top: 10%; right: 0; position: absolute; left: 0; bottom: 0; } } /* write media queries sizes under otherwise stack html order */ 
Comments
Post a Comment