CODEWITHSUNDEEP
csstwitter-bootstrap
Filippo oretti
Filippo oretti

Reputation: 49843

BOOTSTRAP CSS photo wall to cover the page

I'm trying to cover the entire page by small photos, but what i found is that i can't cause they leave some left and right margin in the page.

i'm not using js for doing that, just css and html:

<div class="container-fluid" id="wrapper">
<div id="home-decore">

<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
etc ..



</div>
</div>

#wrapper{
  background:red;
    padding-top:5%;
min-height: 88%;
height: auto !important;
height: 88%;

}
#home-decore{
margin:0;
padding-top:60px;
left:0;
top:0;
position:realtive;
min-height: 100%;
height: auto !important;
height: 100%;
background:#000;


}
#home-decore img{
  border-radius:2px;
  border:0.3% solid white;
  opacity:0.6;
  width: 3.3333%; 
    overflow: hidden;
}
#home-decore img:hover{
opacity:1;
}

what i would like is to fit all the page right:0;top:0;bottom:0;left:0;

Upvotes: 0

Views: 1875

Answers (3)

Vita Pluvia
Vita Pluvia

Reputation: 470

What you need is a CSS Reset:

http://www.cssreset.com/

You could alternatively try adding something like this as a quick fix to the body element inside your CSS:

body{
    padding:0;
    margin:0;
}

What happens is the browser defines some default values for padding & margin, I think this is what you're running into currently.

( Also noticed there's a typo in '#home-decore', 'realtive' should be 'relative', this may be providing unexpected results )

Upvotes: 1

Denzil Sequeira
Denzil Sequeira

Reputation: 129

You can achieve that without using Bootstrap css

here's the Css code for it 
 <ul>
    <li style="float: left; padding-left: 5px; padding-right: 10px; padding-bottom: 15px">
  <img/>
   <li style="float: left; padding-left: 5px; padding-right: 10px; padding-bottom: 15px">
   <img/>
   </li>
  </li>
   ...........
 </ul>

And for the Image Border As Bootstrap provides refer to the following link

http://css-tricks.com/using-css-for-image-borders/

Upvotes: 1

TMan
TMan

Reputation: 1905

Take the number of images you have horizontally, then specify the width of each image as (100 / numHorizontalImages)%, and then do the same thing for height. It would look something like this if you had 10 images horizontally and 5 vertically:

img { width: 10%; height: 20%;}

Upvotes: 1

Related Questions