Could you work it like a sprite sheet? Same image but only left half showing to the left of main content area and only the right half showing to the right of the main content area
that's a great idea. How to do this?
background: url('styles/default/xenforo/node-sprite.png') left center no-repeat, url('styles/default/xenforo/xenforo-smilies-sprite.png') right center no-repeat;
- my fixed width style has a width of 990px. What size would the left-image or the right-image have to be to make this properly?
- what happens when somebody browses the website on his mobile phone. Will the image harm the view?
I have a similar issue where the background image is cut off on pages that don't have enough content.
What it should look like:
http://dl.dropbox.com/u/414134/wpplatoon/xf_bg_issue_2.png
What actually happens:
http://dl.dropbox.com/u/414134/wpplatoon/xf_bg_issue_1.png
(note the empty grey area at the bottom, as well as the background image being cut off)
Anyone have any ideas on how to fix this?
(without a hacky workaround - e.g. adding <br/> to the page node)
background-attachment: fixed;
Here is something you can try:
Admin CP -> Appearance -> Style Properties -> General -> Body
> Miscellaneous
background-size:100% auto;
Thanks. I tried adding that property but it didn't fix the issue. It still cuts out at the same place as before.
Any other ideas? Might try looking at that link..
Have you tried the CSS property background-size?
Code:background-size:100% auto;
Unless I'm misunderstanding your needs, that should make the width fit their resolution, and the height match proportionally. If you're more concerned about the height matching, you can switch 100% and auto. That should get it to be pretty close, though it seems your layout is fixed width. Try sending page width in % rather than px. Also, unless you serve up different images for different resolutions (easily accomplished with JavaScript for detecting the resolution, and then serving up different images with their JavaScript or PHP), you'll likely always have differences between different aspect ratios.
Tried a few things based off that but it didn't help. I'm pretty sure the issue is due to the style cutting the page short, but I'm not sure were to look..
The page is only as tall as the content which varies. But if you use background-attachment: fixed; then you can at least fit the background to the height of the browser window which is more consistent.
Here is an example of a forum that uses a "fixed" background image:
http://www.nextgengamers.org/community/
You will notice the image stays fixed as you scroll.
We use essential cookies to make this site work, and optional cookies to enhance your experience.