Advertisement:

Author Topic: How do I work out the size of my back ground?  (Read 836 times)

Offline Beowulf1976

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Female
  • I'm a noob, and proud.
    • Beowulf1976 on Facebook
    • @Beowulf1976 on Twitter
    • Friends of Inigo
How do I work out the size of my back ground?
« on: June 17, 2017, 10:39:45 PM »
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.”

Offline Beowulf1976

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Female
  • I'm a noob, and proud.
    • Beowulf1976 on Facebook
    • @Beowulf1976 on Twitter
    • Friends of Inigo
Re: How do I work out the size of my back ground?
« Reply #1 on: June 18, 2017, 03:07:04 PM »
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.”

Offline Gwenwyfar

  • Full Member
  • ***
  • Posts: 483
  • Gender: Female
    • Gwenwyfar on GitHub
Re: How do I work out the size of my back ground?
« Reply #2 on: June 18, 2017, 03:48:08 PM »
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.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 54,747
  • Gender: Male
    • Kindred-999 on GitHub
Re: How do I work out the size of my back ground?
« Reply #3 on: June 18, 2017, 04:02:22 PM »
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
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Gwenwyfar

  • Full Member
  • ***
  • Posts: 483
  • Gender: Female
    • Gwenwyfar on GitHub
Re: How do I work out the size of my back ground?
« Reply #4 on: June 18, 2017, 04:16:13 PM »
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...
« Last Edit: June 18, 2017, 04:57:18 PM by Gwenwyfar »

Offline Gluz

  • Native Language Support Specialist
  • Sr. Member
  • *
  • Posts: 843
  • Gender: Male
    • Al-eXs on GitHub
Re: How do I work out the size of my back ground?
« Reply #5 on: June 18, 2017, 04:49:31 PM »
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 %.
Need help with PHP, HTML, CSS, Themes or MODs?

Quote
Think in spanish, habla en inglés.

Offline Beowulf1976

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Female
  • I'm a noob, and proud.
    • Beowulf1976 on Facebook
    • @Beowulf1976 on Twitter
    • Friends of Inigo
Re: How do I work out the size of my back ground?
« Reply #6 on: June 19, 2017, 05:36:40 AM »
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.”

Offline Beowulf1976

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Female
  • I'm a noob, and proud.
    • Beowulf1976 on Facebook
    • @Beowulf1976 on Twitter
    • Friends of Inigo
Re: How do I work out the size of my back ground?
« Reply #7 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?
“Them as can do has to do for them as can't. And someone has to speak up for them as has no voices.”

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 54,747
  • Gender: Male
    • Kindred-999 on GitHub
Re: How do I work out the size of my back ground?
« Reply #8 on: June 19, 2017, 06:07:29 AM »
that will probably work on some screens....   but as I said, it's not going to work as nicely as you want it to...
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Beowulf1976

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Female
  • I'm a noob, and proud.
    • Beowulf1976 on Facebook
    • @Beowulf1976 on Twitter
    • Friends of Inigo
Re: How do I work out the size of my back ground?
« Reply #9 on: June 19, 2017, 06:08:46 AM »
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.”

Offline Beowulf1976

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Female
  • I'm a noob, and proud.
    • Beowulf1976 on Facebook
    • @Beowulf1976 on Twitter
    • Friends of Inigo
Re: How do I work out the size of my back ground?
« Reply #10 on: June 19, 2017, 06:16:16 AM »
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
« Last Edit: June 19, 2017, 06:26:47 AM by 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.”

Offline Gwenwyfar

  • Full Member
  • ***
  • Posts: 483
  • Gender: Female
    • Gwenwyfar on GitHub
Re: How do I work out the size of my back ground?
« Reply #11 on: June 19, 2017, 09:48:01 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.

Offline Beowulf1976

  • Jr. Member
  • **
  • Posts: 107
  • Gender: Female
  • I'm a noob, and proud.
    • Beowulf1976 on Facebook
    • @Beowulf1976 on Twitter
    • Friends of Inigo
Re: How do I work out the size of my back ground?
« Reply #12 on: June 19, 2017, 02:23:46 PM »
Thank you :)
“Them as can do has to do for them as can't. And someone has to speak up for them as has no voices.”