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

[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

[Leo]

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 🙂

[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

[David]

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);

[Mark]

Thanks David,

I hadn’t thought about the text shadow idea.

Mark

[David]

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

[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

[David]

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.

[Author]

Posts