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