1

I have a brief to build a swish B&B website - they would like full width background images which I've coded as a cover image using media queries to save loading the larger images on smaller screens..

They have since come back to me to say that they would like the background images to rotate through several images on each page. I would like to lazy load the background images and create a nice transition every 15 or so seconds but i'm not sure on the best approach to take or how I could do this and still use media queries - does anyone have any experience of anything similar or can offer any advice on a good approach?

It needs to work cross-browser (ie8 plus) and ideally with limited bandwidth usage..

Cheers Paul

Dancer
  • 17,035
  • 38
  • 129
  • 206

1 Answers1

0

If you need this feature to be compliant with IE8, then you can not use media queries since it is CSS3 and IE8 does not handles it.

What you can do is use jQuery animations, playing with images opacity to produce transitions. You can see a such example on this website: http://www.mymms.co.uk/occasions/wedding.aspx When hovering left menu items the background image changes.

This had been made using one div for each background image, and all that div are displayed at the same position (superimposed), then fading foreground image from 100% opacity to 0% opacity, and in the meantime fading background image from 0% opacity to 100% opacity; you can get nice transitions, you can even set up the fading time: http://api.jquery.com/fadeTo/

You also may have to set z-index accordingly, to get the 100% opacity image on top.

In addition, to avoid network lag when transitions occurs, you have to place tag in you page, but whtout displaying them (display:none). This will preload images and give fluid transitions.

Hope it can help.

Manuel LANG
  • 1