Change header background image...

User 2699136 Photo


Registered User
8 posts

I'm trying to figure out how to cycle through 4-8 images for my header image. I want the images to change either when the screen is refreshed or at some scheduled amount of time.
The image is placed in the header with the css. That makes it easier for me to swap out the larger image for a smaller one when the screen size changes (trying to do a responsive layout).

Here is the code I currently have to put the image in the header:

body > .row > [class*='coffee-span-'].upcHeader {
background-color: #c8d9e9;
background-image:url('../img/slcSkyline.jpg');
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
width:100%;
height:auto;
}


The URL of the current iteration (still early in the process...) is:
http://upc.utah.gov/testWeb/upcTest1.html

I'm pretty sure I will need to use a combination of js and css, but I'm not sure how to put it together.

Also: Do the pictures need to be the exact same size to work with this?

Thanks,

Ron
User 187934 Photo


Senior Advisor
20,181 posts

I would use a simple Jquery slider script.
I like flex slider.

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699136 Photo


Registered User
8 posts

I thought about doing that Eric and it is certainly the easiest thing to do and works well, but I was worried about doing responsive images and I don't know how I would replace the full size images by using a slider.
With the image being put in as the background in css, I can use media queries to change the image to different versions / sizes at different screen sizes.
If I go this route, it will use the same image at every screen size. Wouldn't that cause a problem for mobile users when downloading the bigger images for full screen size?
User 187934 Photo


Senior Advisor
20,181 posts

Try this method. I've used it and it works well. I misunderstood what you were looking for.
http://css-tricks.com/snippets/php/rand … und-image/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699136 Photo


Registered User
8 posts

Thanks - I got it working. I appreciate the help.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.