Header image and background image to match by size when changing displays

Hello.

I’m using Sydney theme on my website. I want to make header image and background image to match in size completely on different displays. I’ve made an image (white background and three red stripes) and put same image on header image and background image. I’ve used some custom css code (found it somewhere on this forum) to make header image act as I want, now I want the background to match the header by connecting to header image. To better see the connection, I’ve made a white image with three red stripes. It works for me on pc display, on tablet, but not on mobile display. On mobile display those red stripes does not “connect”. Can you help me to make the connection happen? :slight_smile: my website is: http://www.photoambi.com

the code I used for header image is:

.header-image {
     background-size: cover !important; /*instead of auto*/
    -webkit-background-size: cover !important;
	-moz-background-size: cover !important;
 	background-position: center top !important;
  	background-attachment: fixed;
 	height: 100vh;
@media only screen and (max-width: 1024px) {
   .header-image {
        -webkit-background-size: auto !important;
        background-size: auto !important;
  	background-attachment: scroll;
   }
}

I see see I don’t even need the header code I’ve used (it was used before the idea of matching header image with background). I think the problem is in header’s image resizing when display changes to a smaller one (mobile phone display), background image shrinks normally, but the header’s image stops at some point. I would need a code for that to fix :slight_smile:

Hello @aibo77,

Please try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up).

@media (max-width: 852px) {
    body.custom-background {
        background-size: contain !important;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi, Roman.
It didn’t work and I abandoned this idea. Now I would like just to change header image to a different one for mobile displays. I will create separate topic regarding this question :slight_smile: thanks for your reply :wink:

Okay, you are welcome @aibo77!

Kind Regards, Roman.

Roman, if you can help, answer to my other topic :wink:

Hello @aibo77,

Can you please disable maintenance mode and provide a link to additional image?

Kind Regards, Roman.

oops, sorry for maintenance mode :wink: disabled it
here’s the link to image: http://www.photoambi.com/wp-content/uploads/2017/06/cover-v3.jpg

Try to use this CSS code:

@media (max-width: 640px) {
    .sydney-hero-area .header-image {
        display: none;
    }

    .sydney-hero-area::before {
        content: '';
        background-image: url('http://www.photoambi.com/wp-content/uploads/2017/06/cover-v3.jpg');
        width: 320px;
        height: 503px;
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
        margin-left: auto;
        margin-right: auto;
    }
}

Kind Regards, Roman.

Roman,

now there’s no header displayed, after using the css u provided.

Roman, refreshed the page after few minutes, and yes - it works. wooohooo :smiley: thank you :slight_smile:
now I have a huge space above the header. do I have to change the image and cut the upper part, or there is a space in displaying it? inspecting element shows that it’s whole image, so I guess I have to cut the upper part of the image :slight_smile: will the css you provided change after I alter the image?

Hello @aibo77,

You can cut the image, just remember to change link in code if you reupload the image.

Kind Regards, Roman.

Roman,
one more question. is there a way to make this cover show up only in mobile “portrait” mode, when phone is in vertical mode? and when the phone is in “landscape” or horizontal mode, to show the other header image, which is the main image?

found the answer :slight_smile: added “and (orientation: portrait)” to the code and it works :slight_smile: