Background image on Omni

[Frode789]

Working on adding a background image using backstretch. It looks great on my front page, but inside my articles it stretches too much and doesn't look good at all, also isn't fixed so that on long articles it will go beyond the image height.

Looks good: http://www.theaocdungeon.com/
Looks less good: http://www.theaocdungeon.com/threads/ashes-of-creation-complete-class-list-released.3/ (too zoomed in)
Looks bad: http://www.theaocdungeon.com/threads/dev-journal-city-hall.4/ (even more zoomed in, pixelated, image ends at the bottom before end of article).

Any obvious options I've missed? Thanks.

 

[Russ]

Can you try selecting the default position on on the backstretch option, does that help?

 

[Russ]

Also your image, you can select None to remove the warcraft image if you want, or set a new image here: Style Properties -> Page setup -> Main wrapper

 

[RobParker]

What's the benefit of backstretch as opposed to just placing it as background? I ended up sticking our background image on xbMainWrapper as trying to use it via backstretch settings just didn't seem to work well.

 

[Frode789]

Default works, thanks!

Yeah just haven't gotten around to it yet. But thanks =) Loving the new theme by the way.

Now I just need to find a guide on how to make a custom page in XF2, which apparently was supposed to be much easier than in XF1

 

[RobParker]

It's very simple!

https://xenforo.com/community/resources/page-as-portal-homepage.5663/

 

[Steve]

It's very simple!

https://xenforo.com/community/resources/page-as-portal-homepage.5663/

Basically using the same setup here: https://guitarexit.com/

 

[Russ]

What's the benefit of backstretch as opposed to just placing it as background? I ended up sticking our background image on xbMainWrapper as trying to use it via backstretch settings just didn't seem to work well.

View attachment 7262

It'll load the images after your page is loaded helping speed up the overall content loading for one, additionally, it will automatically stretch the image to fit the block/element it's attached to. But normal HTML/CSS does the trick too!

 

[RobParker]

I might be misreading that but are you saying to add it to the wrapper as I have above but also enable backstretch? I took then to be either/or.

 

[Russ]

I might be misreading that but are you saying to add it to the wrapper as I have above but also enable backstretch? I took then to be either/or.

The wrapper bit was specific to Omni, @Frode789 's site has backstretch running on the entire page, and also Omni's unique image option which loads on the main wrapper property. For your style you probably won't need both and can choose either one to use.

 

[Frode789]

By the way, when using a background image with backstretch, I'm thinking about what size and quality I should have.
I have a HQ image with 3456 x 1944 pixels. Obviously, I don't want it to look pixelated, so good quality is vital. Then again, should I resize it, and if so, what size would you recommend? I have compressed the image from 4MB down to 1MB.