Different images on header callout

Shapely
1

Hello,

is it possible to choose different images on the header callout on different pages? Now I only can set one picture and it will show up on each site or choose randomly? I want different images on the call out.

Thanks

2

And why is the header call out not responsive anymore?

3

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the call out image on each page by going to Appearance > Customize > Additional CSS and pasting it there.


/*Header call out*/
.page-id-662 .bg-secondary {
    background: #f5f5f5;
    background-image: url("IMAGE URL GOES HERE");
}

You need to change the page id for the page that you want to use. This link would show you where it is:

Best Regards,
Support

4

Hello, thanks that is working!

What size should the header call out pic should be?

5

HI

You can use any size image, but its recommended to keep width above 2000px

6

Thanks!

Problem is then the area shown is not choosable. It only shows the upper part of the image.
I want to make the picture that sizes that it fits in perfectly and shows exactly the part I want.

Thanks

7

Hi there,

The image cannot really be set to show in that available space as its not the enough or in most cases not the same aspect ratio of the image. That is why only the top part is shown.

You can control which par of the image is shown by using this CSS:

.header-image-bg {
   background-position:bottom;
}

the above will show the bottom part of that image.
You can use bottom, top or center if you want.

There are more background image CSS properties you can use to adjust this and see if you get what you want: background-image | CSS-Tricks

Hope this helps.

8

Hello,

If I add:

.header-image-bg {
background-position:bottom;
}

It will not change still showing only top of the image?

9

Can i see it? please provide url to the page

10

Hello,

I am working on this wordpress theme as an offline version. It is not possible to see.
I am working on a child theme.

Regards

11

How do I have to post the code in custom css? Now I have it like this for center:

/Header call out community/
.page-id-27 .bg-secondary {
background: #f5f5f5;
background-image: url(“URL”);

}

.header-image-bg {
background-position:center;
}

12

Any css code can be added in appearance > customize > additional css

13

Hello It is not working any additional advice? Always showing the top of the image.

I always having issue adding images to the callout header. I can`t place it like it is showing exactly the size/part i want to. Sometime it is to big when I change size sometimes it is to small? And it is also not responsive?

PLEASE HELP