Angel wings on forum

[nekobot]

I'd like there to be angel wings on either side of the forum on ONE theme's background, but it only works for MY screen resolution as I've figured out, and a lot of my members can't see them. Is there a way to put them on the background or something so that they work with all/most screen resolutions?

forum link: utauboards.boards.net/

included an attachment so you could see what i mean. 

Attachments:

[Tumbleweed]

Oct 19, 2015 11:36:34 GMT -8 nekobot said:

I'd like there to be angel wings on either side of the forum on ONE theme's background, but it only works for MY screen resolution as I've figured out, and a lot of my members can't see them. Is there a way to put them on the background or something so that they work with all/most screen resolutions?

forum link: utauboards.boards.net/

included an attachment so you could see what i mean. 

Yep, I don't see them. How did you add them in the first place? I don't feel like scanning all your coding to see what you did. It might be just matter of just some css changes but I'm actually thinking you may need to put another div around the wrapper template just big enough to hold those wings near the forum sides. Anyway, if you could post where you added the wings and the css that you used, that should help.

[nekobot]

I just made them as part of the background image itself, and applied the background image via the Visual editor.

[Azy]

I can't see the wings, despite having what appears to be the same screen resolution, so I'm guessing it's a member thing/non-guest theme thing.
If I had to guess I'd say you have the wrapper width set to a percentage (which is the right way to do it, if you want your forum to show on different client area sizes) and the wings are padded out from either side of the wrapper by a specific amount. People with smaller client areas (smaller screen resolutions, or window sizes) won't see the wings because what's happening is the left and right edges are collapsing in to scale with the client area width. This is pushing the wings off the edge of the screen.
If you see the wings, but the wings vanish off the edges when you make the window smaller, this will confirm this.

There's a couple of fixes: You could position the wings in the body instead of the wrapper, and using the position:fixed; property. Position the top of each to 50%, and set the left property of the left wing and right property of the right wing to pixel amounts.

Or

Set the wrapper div width to 100%, put the entire thing in a three column table (and trust me, you're gonna wanna use tables for this option. Divs are a pain in the arse to use in this way), set the left and rightmost columns to a fixed width and put the wings in, set the middle column to 100% (which take sup the remaining space) and put the forum content in.

[nekobot]

I think you're still on the default theme which is why you cant see it?

[nekobot]

How would I do the 1st option?

[nekobot]

bump?

[Tumbleweed]

nekobot,

Try adding this to the bottom of your style sheet:


body{
background-repeat:repeat-y;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

[nekobot]

Thank you! Do I add something to that to make it work??

[Tumbleweed]

Oct 28, 2015 11:20:12 GMT -8 nekobot said:

Thank you! Do I add something to that to make it work??

What I gave you, I'm hoping will work just as it is, so ask your members if it is fixed now. 

[Lainey2712]

I also have members with smaller monitors etc. that end up having to scroll to see all the forum.
I overcame it by making the same Themes/skins (I make all my own) in two sizes.
The background width on the bigger one is 960px, whereas the smaller versions are 760px.
The members just use the one that works for them.

I would assume this is not the correct way to do something, but hey ho if it works I am not worried LOL!