resriel resriel - 5 months ago 9
CSS Question

How to create a grid of elements (divs/spans) in perfect squares with their backgrounds set to images

I've been working on a website that serves as a gallery for fantasy art, an evolving project, and I've currently hit a barricade in where to go from something I can't get to work. I tried Masonry and Wookmark both, and had issues with both, so I'm trying to do something else. I'm wanting to spawn in either divs or spans (I'm not sure which to use) within

grid
with the class identifier
images
and set their backgrounds to specific image sources that "cover", centered, so I basically have a grid of square windows into these images and when clicked, they bring up a lightbox (which I've succesfully created). Right now I've managed to get the images to show but the containers are smooshed down and have no padding left or right.

Truth be told, I have no idea what to do with the relative/absolute positioning and inline/block display parameters, and I feel this is where I'm going wrong but I don't know really what these things entail.

Segment of the HTML:

<div id="grid" class="grid"></div>
<br>


CSS:

.grid {
z-index:2;
display: inline-block;
}

.images {
display:inline-block;
position:relative;
width:25%;
height:25%;
z-index:2;
padding-right: 0.25em;
padding-left: 0.25em;
padding-top: 0.5em;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}


Javascript:

var mix = shuffle(Object.keys(backInfo));


function unlockImages () {
setTimeout(function () {
if (mix !== undefined) {
var input = mix.shift();
var entry = backInfo[input];
var elem = document.createElement("div");
elem.setAttribute("class", "images");
elem.setAttribute("id", input);
elem.setAttribute("title", entry.caption);
elem.setAttribute("onclick", "javascript:changeImage(" + input + ");");
document.getElementById("grid").appendChild(elem);
document.getElementById(input).style.backgroundImage = "url(" + entry.image + ")";
$("#" + input).fadeTo(0,0);
$("#" + input).fadeTo(20000,1);
unlockImages();
}
}, 0)
}


And a live preview of what's going on at the moment: http://www.dreamquest.io

Answer

I think the problem you are describing is css. I played with your css a little and came up with this:

.grid {
  z-index:2;
  display: inline-block;
  height: 500px;
  width: 1500px;
}

.images {
  display:inline-block;
  position:relative;
  width:25%;
  height:25%;
  z-index:2;
  margin-right: 0.25em;
  margin-left: 0.25em;
  margin-top: 0.5em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Some things to note with your css:

  1. when you are setting a percentage width x height, your parent container has to have a value. Since you didn't set a height value in the .grid class your images get squished because it is taking 25% of 0 height.
  2. background-attachment: fixed; forces your picture not to auto resize, which i am assuming you want
  3. you were using padding that is why you are not getting the spacing between images. Padding is for the interior of the element. If you want space between elements then you need to use margin, which I have used in the above css. hth