Applying background images to an image element

Question

I'm having a bit of trouble applying some background images to an image element. does anyone know if this is even possible?

what i want to do is have this gallery where the next and previous buttons change position based on the size of the image, so I was planning on just having the next and previous buttons set in a class that is applied to the image being shown.

here's the gallery that this is for: http://reveriesrefined.com/myftp/stack_1/

Answer 1

An image element will resize itself to fit the size of the image. Even if it was valid CSS to apply a background-image to an img element, it would always be covered up. Not to mention you can't click a background-image.

A better solution is to write the buttons as HTML. You can use CSS to move the buttons to the far left and far right, or if you want to position them veritcally, top and bottom.

<style>
    .image_cont { position: relative; display: inline-block }
     /* left and right styling */
    .image_next_btn { position: absolute; left: 0; top: 50%; margin-top: -10px; }
    .image_prev_btn { position: absolute; right: 0; top: 50%; margin-top: -10px; }
     /* or top and bottom styling */
    .image_next_btn { position: absolute; left: 50%; top: 0; margin-left: -10px; }
    .image_prev_btn { position: absolute; left: 50%; bottom: 0; margin-left: -10px; }
</style>

<div class="image_cont">
    <img src="images/Ania_02.jpg">
    <div class="image_prev_btn">prev</div>
    <div class="image_next_btn">next</div>
</div>