How to change marquee images (the background images behind your header text on pages)

Accessibility Reminder

When updating marquee images, ensure the image includes meaningful alternative text if it conveys important information. If the image is purely decorative, confirm it is marked appropriately.

After publishing changes, review the page using Anthology Ally to identify any accessibility issues.

(View a training video on How to Change Marquee Images here.)

Marquee images are essential to the overall aesthetic of the Georgia State University websites. Within the Flex 2 website, there are three types of Marquees:

1) CTA Marquee without buttons

2) CTA Marquee with buttons Image: https://gsu.uservoice.com/assets/220791664/Screen%20Shot%202020-05-27%20at%209.35.00%20AM.png

3) Simple Marquee without CTA

The text row below the header is optional. If you don't need it, edit the row and check the disable option.

Image: https://gsu.uservoice.com/assets/238217203/simplemarquee.png

Marquees have images for both mobile and desktop that must be updated.

Mobile Marquee Image

The mobile is the quickest element to change, but it's often overlooked. You can change this image by visiting your page and opening the site's backend editor. Next, select the icon for the image row. If your photo is not in the media library, then you’ll need to upload it. Once the image is uploaded and selected, change its "Image Size" to "FULL" to ensure that it fills the entire width of the column it's in. Then click "Set Image."

Image: https://gsu.uservoice.com/assets/220791793/Screen%20Shot%202020-05-27%20at%2011.56.39%20AM.png

Image: https://gsu.uservoice.com/assets/220791853/Screen%20Shot%202020-05-27%20at%2011.58.34%20AM.png

Desktop Marquee Image

The desktop marquee image is a background image that is typically found in the marquee's row. To change the desktop image, you’ll need to go into the row section by selecting the pencil/edit icon of the row identified by the "#outer-floating" ID.

Select the tab for "Background." Select the image you want to replace the current image with like you did with the mobile image.

Image: https://gsu.uservoice.com/assets/220791805/Screen%20Shot%202020-05-27%20at%2011.46.38%20AM.png

Image: https://gsu.uservoice.com/assets/220791799/Screen%20Shot%202020-05-27%20at%2011.46.23%20AM.png

The Background Image Position default is 50% 50%, or center/center. You may need to adjust this in order to make sure that the image selected is framed properly on the live desktop version of the page. You can make the background image appear higher or lower by making the second percentage higher or lower. Test your changes to see if they work best for the image chosen.

Note: Always optimize the background for a laptop screen.

Image: https://gsu.uservoice.com/assets/221279776/Screen%20Shot%202020-06-18%20at%204.10.56%20PM.png

NOTE:

Occasionally, images will be in the SECTION background instead of the row's background. If you looked in the row and didn't see an image, go to the section edit button and replace the image there (see screen capture below).

If your marquee is set up in this manner, you won't have the option to change the Background Image Position. If you would like to change this marquee for one that contains the option to alter the Background Image Position, you should be able to find a new marquee in your Templates. Add it to the page, move it to the top, and remove your old marquee. If you don't have a marquee in your template library, submit a ticket and we can assist you.

Image: https://gsu.uservoice.com/assets/221004196/Screen%20Shot%202020-06-05%20at%206.50.32%20PM.png

Image: https://gsu.uservoice.com/assets/221004199/Screen%20Shot%202020-06-05%20at%206.50.00%20PM.png

Bonus Note: If your image is not tall enough to display the part of it that you need in your background...

In this case, you could either recrop your image with an image editor (like Photoshop or iloveimg.com), or use the AI in Photoshop to extend the top and bottom of the image, giving you more room to raise or lower it in the background. Then re-upload it to the page and change its horizontal percentages to the correct amount.