How do I work out the size of my back ground?

Started by Beowulf1976, June 17, 2017, 10:39:45 PM

Previous topic - Next topic

Beowulf1976

I am using the forum at 70%, I would like to know if there's an easy way I can work out what size my side panels should be?


First of all, what is the overall dimension of the image I should create and then, how narrow should the panels be to fit without the forum covering them ?


My profile on here has a link to my forum.You'll see what I mean about side panels


Thank you, in advance for your help.





"Them as can do has to do for them as can't. And someone has to speak up for them as has no voices."

Beowulf1976

77 views and no answers? Not even someone telling me it's impossibru to work out? :(


PS.


I tried measuring it with those onscreen measuring tools like "measureit" in Chrome extensions, but If I create an image to the dimensions that claims I need, it looks like I am creating a website for a dolls house! :((the images come out TINY)
"Them as can do has to do for them as can't. And someone has to speak up for them as has no voices."

Gwenwyfar

77 views does not mean 77 people saw the topic, and there are also bots adding to that.

And it's a little unclear what exactly do you want measured, or what do you want to do. If it's the measure of your sidebar you can check that by clicking "inspect" on it on your browser, you will find a box with the measures there.
"It is impossible to communicate with one that does not wish to communicate"

Kindred

Also, with your site at a percentage, it's going to look different on every single different screen...   you can't just pick a fixed width image or side column on a percentage based design
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Gwenwyfar

#4
Edit: Wait, what side panels are you referring to? If it's your background, they are always going to be a different size on every monitor. Since your forum is set at 70% you can make each add to 15% of your image. Then just use a high quality image as pointed below by Gluz.

And as Kindred said, this is how your site looks on a different monitor (one of many possibilities), so you might want to rethink everything you're doing...
"It is impossible to communicate with one that does not wish to communicate"

Gluz

I would recommend a large image with the most standard big resolutions, like 1920x1080 or 2560x1440, with background-position: top center and could be with background-size: 100% 100%.

That way it will fit any screen size almost the same way, if your forum is in %.

Beowulf1976

The side panels need to be visible no matter what resolution, So the forum + background would all resize together depending on the resolution of someone's set up - I don't want the background (side panels) to be less visible on one screen than on another - ie I don't want the images to disappear behind the forum at all.

So what I was asking in a severely unclear way is:

Making the background in photoshop:

What resolution would I need to make the background in, what size would each side panel need to be in the background image, ie how many pixels should left and right panels be in photoshop, and then:

Making the background and the forum fit properly together:

What settings would I need in .css etc to make it all fit nicely no matter what resolution someone is using?
"Them as can do has to do for them as can't. And someone has to speak up for them as has no voices."

Beowulf1976

So if I have a background, and I want the forum to be 70%, do I take the resolution (which I would choose at 1920 x 1080) and calculate 15% of the 1920 to make each side panel?
"Them as can do has to do for them as can't. And someone has to speak up for them as has no voices."

Kindred

that will probably work on some screens....   but as I said, it's not going to work as nicely as you want it to...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Beowulf1976

How am I supposed to create a background that works on all screens?


Most of my forumers use 1080p so I think I'll work on that and put somewhere "This forum looks best in 1080p resolution".
"Them as can do has to do for them as can't. And someone has to speak up for them as has no voices."

Beowulf1976

#10
Right, I've looked on my chromebook and my test-sides are not even visible, so next question.

Is there anything I can place in my CSS that will force the entire background/forum/everything to resize to resolution of browser?

Because it does it for all the other themes I have seen, surely there's something I can put in the css to make the background 100% no matter what resolution?


Edit: nvm, just seen Gluz's reply


Edit: Whole forum & Background now resizes as per screen-res
"Them as can do has to do for them as can't. And someone has to speak up for them as has no voices."

Gwenwyfar

Quote from: Beowulf1976 on June 19, 2017, 05:41:54 AM
So if I have a background, and I want the forum to be 70%, do I take the resolution (which I would choose at 1920 x 1080) and calculate 15% of the 1920 to make each side panel?
Yes, that's the easiest solution. Just have in mind that although the width will remain constant with percentages, the height will not always be proportionate. You can have the image stretch to both height and width (but will look distorted for some people), or cut in the corners if it "overflows" beyond a person's browser window limit. Gluz' sample code stretches both sides, but the one you now used (background: 100%) leaves the bottom corner out.

If you want, you can also make higher resolution images, but set them to be used only if a person's monitor is large, ex: you can make a 4000px wide image and define that it will only be downloaded/used if the browser has a resolution larger than 2000px. This way you have images for different resolutions without making everyone download a really large image.
"It is impossible to communicate with one that does not wish to communicate"

Beowulf1976

"Them as can do has to do for them as can't. And someone has to speak up for them as has no voices."

Advertisement: