Appearing and Disappearing Background Images

I'm fairly new to coding and would like to have multiple layers of background images on a site. There will be one static background, and then upon clicking a button on the nav bar or by scrolling down the site, a new background appears over the static background. As you scroll up or down that image disappears in lieu of another. This would be repeated a number of times.

I'm assuming I should use jquery to solve this issue?

I would link the Big Omaha 2012 site, but they've removed it now. But similar to how each speaker's cartoon image would appear as you scrolled over their information. If you're familiar with that site.

Answers


I would say that you should have the background on a given html tag, and with jquery you just detecting when you want to change the background image, and use $('your_tag').css('background-image',"image_url") to change the background. That way you will not need to load multiple image to the page.

Another way, is to have probably a div that will cover the whole page as the static image, and another image that will have a z-index higher than the static one, which you will use that one to show the other images.


Need Your Help

MongoMapper ALL vs. WHERE difference?

ruby-on-rails mongodb mongomapper

I stumbled across this randomly in my code:

Getting a null object reference from Service when use method get

android android-service vk

i wanna load in background some data from VK API, so to do this, i create my own service "VKNotifications" and set Thread getNews: