Background Image Responsive Alignment

Hi,
You can adjust the position of your image using the CSS background-position property on the body element with custom background. It is set like this now:

body.custom-background {
    background-position: top center !important;
}

If you change center to left then you’ll see more of the left part of the image (and actually the first one should be the horizontal and the second one the vertical position):

body.custom-background {
    background-position: left top !important;
}

You can also fine tune this by using percentages (0 for top and choose the correct one for the horizontal position):

body.custom-background {
    background-position: 20% 0 !important;
}

If you only want this for small screens, you should wrap it in a media query that defines the max. screen size this style is applied to, like this:

@media screen and (max-width: 480px) {
    body.custom-background {
        background-position: 20% 0 !important;
    }
}

I mustn’t forget: you should apply this to your style.css file (at the end) in a child theme or in your theme if it allows custom CSS.

Hey Csaba! thank you so much for your input. Unfortunately I am very new to all this and only really understand about half of what you told me!

Where do I find the style.css file to drop in …

body.custom-background {
background-position: left top !important;
}

Or alternatively can you suggest a page on here that talks about these things!

Thank you! Richard

OK so I found the style.css file in the editor section of the appearance tab.

It tells me that i shouldn′t play with the coding here!!

Do i literally just copy and paste your code

body.custom-background {
background-position: left top !important;
}

at the bottom of the window and click update file?

Thank you very much. Richard

HI Csaba! so I just jumped right on in and gave it a go and it worked a treat! Exactly what I was looking to achieve, especially the % shift, with this I was able to fine tune which bit of the image is displayed. Thank you so much for your help.

All the best, Richard