[Support request] Background color AND image in header?

Home Forums Support Background color AND image in header?

  • This topic has 6 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1232858
    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.

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1233101
    Leo
    Staff
    Customer Support

    Hi there,

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

    #1233115
    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.

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1233322
    Leo
    Staff
    Customer Support

    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 🙂

    #1233352
    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.

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1233489
    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.

    Usual environment: Mac OS 10.15.7
    Also iPad Pro, usually the latest iOS
    #1234152
    Leo
    Staff
    Customer Support

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.