Page background image with Vision template starter

consafo · October 2015

Imported the Vision theme template. It is set with a default background image for all pages. I only want the background image on the front page. I deleted the background image in the theme settings.

Suddenly the background image on the front page is tiling. Repeating. I'm sure there is a way to turn this off, but I'm not sure what it is.

See front page in development here: http://www.joemcarroll.com/

Albert · October 2015

Hi,

what is the password to your site? Because we are unable to have a look on what you mean.

consafo · October 2015

JC2015

apologies. I forgot I had that password enabled.

consafo · October 2015

I've determined something.

If you turn off the default background images for pages but have a background image for your home page, it does two things.

1. Image starts tiling. It seems unable to pick up on the "no repeat" option because that's tied to the default background image for pages.

2. The front page background image does not behave responsively correctly.

I tested this theory by setting the default background image for pages back to one of your images. The one with the large eye. It fixed the repeating image on the front and the front page responsive started working.

Please look into both of these. thank you.

Albert · October 2015

Ok.

1. So to do not repeat background image, you must use below css:

html {
    background-repeat: no-repeat;
}

2. CSS backgrounds and responsive are technically incompatible.

consafo · October 2015

Please look into what I've noticed though. With a background image set as default for all pages, the background images on any page, even if using a unique background, behave responsively.

But if you do not have a default background image for pages and set a background image for your front page, it does not behave responsively.

MY WORKAROUND - create a single pixel white image 1900 wide and set as background for all pages. But I think you should look into this. It's an odd thing, the way this setting affects things.

Albert · October 2015

But we checked this on our side and it does not work like that. Any background image in header, is not responsive because those backgrounds just can not be responsive. Like we wrote above, CSS backgrounds and responsive are incompatible.

consafo · October 2015

Thanks. I'm sure you are technically correct. The background image does not resize for smaller windows. That's okay. And I'm not trying to argue for no reason. I want to use this theme and need to understand something.

However, your background image does adjust itself a little bit as you narrow browser windows. Try this test:

1. Go to your demo site for the vision template. http://themes.muffingroup.com/be/vision/

When there, resize the browser window. Make it more narrow. You'll notice the page background image withe the woman in the white coat does move. The image itself moves with the window as it gets smaller. The woman stays in the frame. Eventually the window gets too small for her and the background image goes away.

So yes, it's not responsive in that it doesn't get smaller. But the background image moves as the window resizes so that she stays in the frame for a time. Meaning people with smaller browser windows can see her.

2. Now go to my site. The background image is sized exactly the same. The only difference is that the site has the background image default for pages turned off. Resize the window. Notice the background image does not move at all. The main figure in it disappears immediately.

Can you see the difference? If I turn on a default background image for all pages, the image on my front page moves a bit like your demo, leaving the main figure in the screen for smaller width windows.

It may not be fully responsive, but your background image behaves differently as the window narrows depending on whether or not a default background image is set for pages in the site.

MY PROBLEM is that I don't want images like this on every page. I'm considering making a 1900x1 pixel image and setting that as the default for all pages, just so I can keep this turned on. But this little glitch causes issues with anyone using this template who does not want default background images on all pages.

hoping this is clearly stated. thank you.

consafo · October 2015

by the way, I replaced the original demo image on my front page so it will be more obvious the difference. Resize the window in my version and in yours to see.

consafo · October 2015

I'VE GOT IT.

The problem is, with a default background image set for the site you can also select "Center Top No-Repeat"

Centering the background image is the key. That allows the image to stay centered until it goes away at the responsive break point.

Without a default image set for all pages, you cannot have the background image set as center top no repeat.

Maybe we could include the center top command in the css you sent?

Albert · October 2015

Ok, now we see what you meant. However, it is related with background position as you wrote above. If you want additional css for background position, you can use below css:

html {
    background-repeat: no-repeat;
    background-position: center top !important;
}

Page background image with Vision template starter

Comments