[Support request] Background color AND image in header?

[Vera]

In Elements, I have a custom header image with the container set to contained and I applied a color overlay, but the overlay only colors the contained area. It leaves a white margin at either end on larger displays.

When I set the container to full, it looks fine on a tablet. On a large display the image doesn’t leave any white margins but the image gets cropped vertically.

I would like to either have those margins filled with the overlay color (that would be my preference) or tile the entire background horizontally with the key image always centered and the tiling filling in at the sides.

I have not been able to do either. I tried a combination of element settings and CSS but with no luck.

[Leo]

Hi there,

Are you adding any content in the page hero or just the image?

[Vera]

I will be adding content eventually, but there is no content now.

Also, I want to ensure consistent color between the image and the background margin area. I thought if I only imported images with a white background and then applied the same color overlay across that entire header area, it would give me the effect I want and still let me use the content box for other content.

I hope there’s a solution.

[Leo]

Looks like you’ve decided to change the layout?

This is what I’m seeing currently:
https://www.screencast.com/t/DMZsHCYz63yr

Also is that going to be the same on every page?

If so you probably should just use the site header (logo + background image) instead of page hero.

Let me know if I’m missing something 🙂

[Vera]

The screencast is only the home page. It has a different header than the other pages and the Elements container is set to full width. If you go to the URL that’s pasted in the field under my first post, that page still shows the problem. But it only appears on large displays. Probably not on a laptop.

But now that I think of it, the home page also presents the problem of vertical cropping when I stretch the window on my desktop computer super wide. I added a lot of white space to either side of the image so it takes a pretty big window before it crops the contents. I feel I should be more economical with the file size but I did what I had to.

In answer to your question: The home page has a different header image than the other pages. I may eventually change the other pages to different headers representing some of the different sections, but they will be similar designs (animal drawings in the Seminar—>animal anatomy section, drawings of people in the Seminar—>human anatomy section, etc.). I may even try sliders. Where a theme doesn’t apply (support, contact, etc.), I will use a generic banner. For now all pages are the generic banner.

[Vera]

I‘ve been spending most of the past couple weeks just trying to tweak CSS to make things look the way I want. Instead of diving into another CSS rabbit hole, I think I’ll make it easy on myself and just widen the images for now. Unless there’s a simple answer (I’m thinking not), I’ll revisit the background issue another time.

[Leo]

Using a wider image would be a good idea I think 🙂

[Author]

Posts