Add a Header Image

[KristenWobbe1]

Hello!

I was wondering if anyone could assist with custom code for adding an image into my Hub site Header? I wanted to have an image, not just an option to change the header background color.

I found some code samples, but I'm not entirely sure what code to use and where to insert it into the existing code section.

This is what I found. Would this work, or would you recommend something else? 

1. Enter the following in html page

1. Define the css in a stylesheet

If this would work, where in the existing code would I insert this? Or would you recommend something else?

Thanks!

[KlaraSchmitt · Accepted solution]

Hi Kristen,

To inject a background image in your header, you'll want to chose the "Custom HTML/CSS" option under appearance. We currently do not have a method for you to set a background image on our preconfigured header layout options, although we can certainly keep that as a consideration for a future improvements.

After selecting the Custom HTML/CSS radio in the appearance section, you'll want to expand the next accordion, which will contain boxes for HTML and CSS. You can either select the text input or the expand icon to trigger the modal with the code editor for each section.

Hub is currently using Bootstrap 3 and if you're using the default custom header we provide, you can apply your background image to the .first-tier CSS class or .navbar-default. You likely do not need width or height properties, but you might want to consider the background-size property: https://www.w3schools.com/cssref/css3_pr_background-size.asp If you want it to responsively rescale to fit the entire container, I'd recommend background-size: cover. You also probably want background-repeat: no-repeat to avoid tiling.

If you are comfortable inspecting code, you might find https://opendata-rspb.opendata.arcgis.com/ to be a good example of how to construct a simple custom header with a background image.