Gradient Image

  • crjohnsonltd · Member ·

    Under ‘About Harbourside Estate’ on the homepage I want to add a gradient image like there is in the footer. Is this possible via CSS?

    The blog I need help with is: (visible only to logged in users)

  • chad1008 · Staff ·

    You’d likely have to wrap that section in a container (like you’ve done with your colorblock sections elsewhere on the page. Then, instead of a colored background, you could set a background image (using the background-image property.

    For the opacity, you’d probably be best off adding the fade effect to the image before uploading it. You can do this in image editing software on your computer, or using online tools like the one shown in this thread:
    https://en.forums.wordpress.com/topic/filter-on-background

  • crjohnsonltd · Member ·

    I’ve added the bg image to the colorblock2 section as when I tried to create a new div, I got the bg image, but couldn’t get a background colour. Can you please help?

  • crjohnsonltd · Member ·

    The gradient image is showing, but it looks a bit silly. Any suggestions?

  • chad1008 · Staff ·

    Ah, I think I see. I didn’t realize you were using :before and :after psuedo elements to extend your colorblocks. That’s clever.

    Hm. The problem, as you’ve noticed is that the background image doesn’t extend into the :before: and :after: you’ve placed.

    The footer area is a full width container, so the image goes all the way across, but the content of your page is contained within a narrower wrapper.

    Without writing a lot of CSS (likely fairly complex) to rebuild the page structure to extend to the full width of the screen (and still keep the content contained in the middle) I don’t think you’re going to be able to get another full width background onto that page.

    You might be better off with a theme like Shoreditch, which has a Panel Page template (the front page of the theme demo) that has full width panels, and built in background images.

    I tried to create a new div, I got the bg image, but couldn’t get a background colour.

    When you add the filter to your image before uploading it, I’d use the color you want then, instead of a white filter and then trying to add a color later (the white would mix with your color and throw it off a bit anyway).

  • The topic ‘Gradient Image’ is closed to new replies.