html - Applying background images to an image element -
i'm having bit of trouble applying background images image element. know if possible?
what want have gallery next , previous buttons change position based on size of image, planning on having next , previous buttons set in class applied image being shown.
here's gallery for: http://reveriesrefined.com/myftp/stack_1/
an image element resize fit size of image. if valid css apply background-image img element, covered up. not mention can't click background-image.
a better solution write buttons html. can use css move buttons far left , far right, or if want position them veritcally, top , bottom.
<style> .image_cont { position: relative; display: inline-block } /* left , 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 , 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>
Comments
Post a Comment