Add text on blog page

Support
#1

Hi,
I would like a block text over articles and below the blog title image (where I put Lorem ipsum on the screenshot)

Could you help me ?

Thanks

#2

Hi There,

Thank you for writing in, how did you put a “blog title image” in there? Maybe you can place a text block using the same method.

Please provide us the site URL so we can take a look on your setup. And do you want this block text to show only on blog page, and not on other pages (archive, single posts, search result, etc.)?

Cheers!

#3

Hi!

I just added a background image.
header.x-header-landmark.x-container.max.width {
background-image: url(http://archive.dev/wp-content/uploads/2017/03/Blog.jpg);
background-repeat: no-repeat;
height: 160px;
}

I can’t do the same to add text.

I want the block text to show only on blog page not others.

You will find the website clicking by this link www.societe-genevoise-ecrivains.ch

Thank you very much for your help.

Joss

#4

Hi there,

As you are using the Integrity Stack you can simply go to X > Launch > Options > Integrity > Blog Options and set the subtitle option to achieve your goal:

Needless to say that you should have the blog header option there enabled.

Thank you.

#5

Hi Christopher,

Thank you for your help. Can I ask you to help me to make my background image responsive?

Thanks.

Joss

#6

Hey Joss,

Background Images are already responsive, just make sure you upload a high resolution image and appropriate dimensional image for the backgrounds for the best results. (Image used for background should have more width than height for example 1250×800 or anything higher than that but with the same proportions )

Hope this helps!

#7

Hi Nabeel,

http://societe-genevoise-ecrivains.ch/blog/

As you can see, when you decrease the window size the background image stay the same. Maybe a CSS property forgotten or not working?

Joss

#8

Hi There,

Please update your code to :

.h-landmark {
    background-image: url(http://societe-genevoise-ecrivains.ch/wp-content/uploads/2017/03/Blog.jpg);
    background-repeat: no-repeat;
    height: 150px;
    width: auto;
    background-size: contain;
}

Hope it helps!