ePhys

Would I still be able to place a unique image inside the “page” div of each page if I took that route?

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?

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.

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.

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 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.

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.

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.

I am using the Expound theme.