Text on Header in Blog

Support
#1

I am modeling my blogs after this website and I cannot seem to figure out how he gets text over top of his header photo in the blog. It won’t let me drag a Custom Headline over top of it. It is drawing this photo from the featured image on the blog (not something I added in Cornerstone). I could simply not add a featured image, but then there would be no photo on the actual blog page to show what the blog is about before they click on it. Any suggestions on how I do this?

Additionally, the title of the blogs show up automatically. I’d like to remove the blog title and put it on top of the image. Is that possible?

Here is a blog of mine for reference

#2

Hi There,

To show your posts like this, please follow this : https://benryan.com.au/themeco-full-width-parallax-featured-images/

Hope it helps!

#3

I have the child theme installed, but I can’t seem to figure out where I need to go to make the changes to the blog. Any suggestions?

#4

Hi There,

You can download the child theme provided on https://benryan.com.au/themeco-full-width-parallax-featured-image/ which is already customized.

Hope it helps

#5

Of course, I already have the child theme downloaded, but at the link you provided in the comments people are discussing how they are changing opacity and color and things of the child theme and I can’t find where to do that.

#6

Hi There,

Did you already figure it out? I see a banner that you want on your posts.

screenshot

Please clarify,
Thanks,

#7

So as you can see, that is the effect I got by simply installing the child theme. I’d now like to remove that green/blueish overlay on the photo, center the text in the photo and make it parallax, but I can’t find where to do that.

#8

Hi There,

Please add the following code to Theme Options CSS

.featured-image:after {

    background: none !important;
}

Hope it helps

#9

Thanks for that! It did exactly what I said I wanted, but I guess I didn’t communicate they way I should have. I still want an overlay over that photo, I just didn’t want to blue/green overlay. I just wanted it to be a bit darker so that the text pops.

Additionally, is there a way to make the text center in the middle of that photo?

#10

Hi again,

Try adding the following code in your Customizer:

.benryan.featured-image:before {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    position: absolute;
}
.benryan.featured-image {
    position: relative;
}
.featured-image .caption {
    left: 0;
    right: 0;
    text-align: center;
}

Let us know how this goes!

#11

Looks pretty good! The only other things I’d like to do is make the image full screen so that the viewer can see the full photo when they come to the page, instead of just the top of it.

And then have text actually centered in the photo and not in the center bottom.

And have a dark colored overlay so that the text pops off the image! Thanks

#12

Hi there,

Try replacing the previous code with the following code and make sure to add it in your child theme’s style.css file::

.benryan.featured-image:before {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    position: absolute;
}
.benryan.featured-image {
    position: relative;
    background-position: 0 60% !important;
}
.featured-image .caption {
    left: 0;
    right: 0;
    bottom: 50%
    text-align: center;
}

Hope this helps!

#13

That definitely did darken the photo, which is exactly what I was wanting. That’s perfect, but unfortunately it did not make the photo full screen or put the text in the center of the photo.

Would you know how to do that?

#14

Hi,

It’s fullscreen on my end and the text centered.

Try to clear your browser cache and check again.

Thanks

#15

Perhaps I’m not using the correct vernacular.

I was hoping it would have more height to it as well. I love that’s its full width, but I’d like it to look more like the site below.

The photo takes the full page and the text is right in the center. His top header is exactly what I want mine to look like. The only thing I need to do now is make the image taller and put the text in the very center of the photo.

Any suggestions on that?

#16

Hi There,

Please add the following CSS to Theme Options CSS

.benryan.featured-image {
    height: 90vh;
}

Hope it helps!

#17

AWESOME! That worked perfectly in making the photo the size I wanted! Thanks so much!

Any advice on moving that text up to the center of that photo though? Last question, promise haha

#18

Hi again,

It looks like you’re using gap element above the text, reduce it’s margin to display it in center.

Hope this helps!

#19

Hmm…I’m not sure how I’m using a gap element. You can’t really add that in blogs with cornerstone right? The only thing I can think of is it being in some of the CSS that I have. Below is all the CSS I have added.

.benryan.featured-image:before {
content: “”;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
position: absolute;
}
.benryan.featured-image {
position: relative;
background-position: 0 60% !important;
}
.featured-image .caption {
left: 0;
right: 0;
text-align: center;
}

.featured-image:after {
background: none !important;
}

#20

Hi,

We check the code and we can see the gap element.

You may change the size to adjust the spacing.

You can also add multiple gaps with different sizes and different visibility settings.

That way your text will be in the same position on different screen widths

Thanks