Align background image middle and center

Question

Here\'s the html:

Answer 1

Jackson. I'm going to recommend a bit of an HTML rewrite, which I understand may not be possible, but I think this might be the most effective solution to your problem.

Create a hidden image with that database encoded :

img#imgUtility {
   display: none;
}

(CSS and HTML)

Then after the page has loaded and image has resolved to an actual URL, you can replace the with a in your posted HTML, set the hidden tag src to the background image of the using it's inline style attribute via JavaScript:

// galleryBoxLinkTarget should be a reference to the  in a div.galleryBox
function imgReplacement(galleryBoxLinkTarget) {
   var span = document.createElement("span");
   var img = document.getElementById("imgUtility");
   span.style.backgroundImage = "url('" + img.getAttribute("src") + "')";
   span.className = "imgReplacement";
   galleryBoxLinkTarget.appendChild(span);
}

(JavaScript and HTML)

And then do a bit of clever CSS'ing:

span.imgReplacement {
   display: block;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   width: 200px;
   height: 200px;
}

This should center the picture regardless of dimension, as well as allow you to remove the inline width and height attributes. Hope this works out for you!