Stop background image from centering

Hey. Could you please provide a URL to your site? Many thanks.

Hi, I have the same feature on https://iopscompetition.org.uk. It would be nice to lock the image in place…

The site is https://grannysyogurt.com However, we’ve been trying different alternatives (none of which are actually ‘working’), so what you may see is not the issue we’re having.

Basically, Id like to set a background image behind the content and not have it continually center itself when the width of the browser becomes smaller than the content.

Set a static (pixel) background-size style on the element that has the background image.
https://www.w3schools.com/cssref/css3_pr_background-size.asp

E.g,

body { background-size: 1020px; }

Remove your ‘!important‘ style on the body and all should be okay.

Btw are you aware that you’ll lose these modifications when the theme updates, because they were made to the theme’s files? If it’s just CSS you want to modify then you can use a Custom CSS plugin to manage them instead. These plugins do not modify the theme’s files.

For example this Custom CSS Manager plugin gives you a section of the dashboard to hold your CSS modifications.

Hi there. Thanks for your reply.

Setting a static background-size doesn’t solve my issue. What I’m trying to do is stop the background from positioning itself in such a way that that the center of the background image is always at the center of the browser.

Instead, I would like the background’s image to stay put and not try to place it’s center in the middle of the browser when the width is shrinking.

I was not aware that updates to the theme would do that. I literally started fooling around with this a couple a weeks ago. I am completely new to all of it. Thanks for your advice though, I am definitely looking into that.

Why doesn’t the background-size style do what you want? I can’t see the conflict here.

Sorry for not being clear.

The background-size keeps the background image at my desired size (which it was already doing), but my problem isn’t the size of the background image.

This link shows a black background with a red line going down the center of the background image. The image is positioned exactly where I want it to be at this browser’s width. https://i.imgur.com/JyPca3Q.png

However, when the width starts shrinking past the content section, the background image starts shifting towards the middle of the browser – the background keeps centering itself. Notice the red line is longer where it originally was in the first link. https://i.imgur.com/j1MNQN3.jpg

I would like the red line to stay exactly where it is in the first link, regardless of the browser’s width when it shrinks.

Try removing this style:

background-position: center;

When I do that, it positions the background image in the top left corner – and adjusting the browser’s width from the left simply drags the background along with it while the content remains in the center.

Ideally, I’d like the background image to remain behind the content section at all times.

Sorry I can’t experience your issue.

Here’s what I did to reach a working solution:
In Appearance, Edit CSS, added this…

.site-header .site-branding {
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left center;
}

It’s not perfect but it keeps the important bit of the header image intact at https://iopscompetition.org.uk/.

HTH.

To better illustrate what I want to achieve, Here is a link that explains it better.

This is basically the effect I want. The Yellow background would be my background image. When stretched it all remains centered with auto margins. When the width is reduced below the original size of the background, it no longer tries to center the background, but rather stays centered behind the content area and not the browser.

Actually, I think my problem could be solved by somehow giving the background image a min-width. I’ve tried several things to give the background a min-width, none of which seems to work on the background though.

Do you have the background working as you want it to now? Looking at your site, the background-image no longer centres when the screen is reduced?

What I did was place the image background inside the “page” div. The issue I’m having now is that that same image is on every other page.

Is there a way to make it so that each “page” div has a different image?