0

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/

mmm
  • 2,272
  • 3
  • 25
  • 41

1 Answers1

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>
kipple
  • 314
  • 2
  • 8
  • the problem, is that I am cloning the image and appending it to the #big div in order to make centering easy #big has text-align:center; also, I've tried putting another div within #big and appending the image to that div, but it starts giving me weird problems, I'm still hopeful though that that is the correct solution, I just think I'm doing it wrong. The main thing that I'm trying to accomplish is, I want the next, prev, and close buttons to be positioned relatively from the area of the image (this way they change position automatically depending on the image being shown). – mmm Apr 05 '13 at 04:09
  • If image isn't displayed, alt text will show (in Firefox at least, IE also with a border and symbol for an image) and background-image might show (alt text will be colored with color and background-color, for sure). Also if image has transparency... – FelipeAls Apr 05 '13 at 04:41
  • I've tested the code above in your website. Try replacing one of your images with the image_cont element and you'll see it accomplishes the relative positioning you mentioned. Some general tips: read about relative and absolute CSS positioning and check out firebug for firefox (it makes testing these things much quicker) – kipple Apr 05 '13 at 10:57