Create a Header Image in Google Sites
Previously I had posted a template for creating a header image in Google Classroom. Several people asked if I had one for Google Sites. Sites is a bit tricky because it is responsive. The crop of the banner image depends on the way it is being displayed by the user (obviously something we have no control over).
Template
Google Sites seems to capture the MIDDLE of your image. The Google Drawing template has a blue section in the middle for you to create your banner. Anything in the white areas is likely NOT to be displayed.
Change the Color
Click on the blue box in the middle and use the paint can icon in the toolbar to change the color.
Drag a Bitmoji
Because it is Google Drawing you can drag images right onto the drawing canvas. This includes dragging Bitmoji’s from the Bitmoji Chrome extension.
Download Image
Use the File menu and choose “Download as” and choose “PNG image.” In the Google Sites banner, click on “Change image” and choose “Upload.” This will allow you to upload the image you created.
7 thoughts on “Google Sites Header Image Template”
Thank you so much for this Alice,
Finding ways to customize Google Sites has been really fun as more functionality keeps being added. Really like that there is that option to add a logo to top left corner.
THANK YOU THANK YOU I just used this to create my Google Site
Did anyone else have the problem of the image being “greyed out” when uploaded? I made a vibrant image and it is definitely greyed out on the site…advice welcome!
Yes it does that. You can click on the bottom right corner there is a magic sparkle like icon you can select to undo the filter.
Even when I undo the readability filter, it still has a gray hue over it. Any way to fix this?
It is what it is unfortunately
Thank you so much …this was the simple explanation that I didn’t have to look far for. It worked beautifully with my site…THANKS!!!