[Support request] make featured image be full width WITHOUT using the Header element

Home Forums Support make featured image be full width WITHOUT using the Header element

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #898422
    Mark

    On my “About Us” page I am not using a Header element, but I would like the featured image to be full width rather than constrained like it is now. Is there a way to:

    1. Make the image full width (it is not a header)

    2. Make is about 50% transparent, with a text box on top of it, so that text can be overplayed over the image?

    Thanks

    Mark

    #898432
    Leo
    Staff
    Customer Support

    Hi there,

    1. This CSS should work:

    body.page-id-60 .featured-image.grid-container {
        max-width: 100%;
    }

    2. Header element is your best bet for this as it’s basically what it was designed for. You’d need a custom solution without it.

    Let me know if this helps 🙂

    #898695
    Mark

    Thanks, Leo.

    I have used the header element before, and have used a dark background layover to make the text stand out. However, I’m looking for a way to NOT use an image background layover, but only darken the image behind the text, so the text stands out, but the rest of the image is not darkened. Maybe just using CSS to create a div with a dark background color with alpha, the encase just the text?

    Mark

    #898719
    David
    Staff
    Customer Support

    Hi there,

    options are to add a DIV around your content and add a semi opaque background color to it. But this will be putting the text in a box.

    Another method is to apply a text shadow property to the text elements e.g

    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);

    #898726
    Mark

    Thanks David,

    I hadn’t thought about the text shadow idea.

    Mark

    #898727
    David
    Staff
    Customer Support

    You’re welcome. Let us know if you need a hand with any HTML or CSS.

    #898728
    Mark

    David, one more thought.

    If I use the div method that puts the text in a box, couldn’t I just use border:0 so it wouldn’t “look like” a box?

    Mark

    #898746
    David
    Staff
    Customer Support

    That would remove the border, but the background would still extend to the size of the content so wouldn’t just be behind the text but any space / lineheight / padding.

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