Author Topic: Re-sizing MOTD image to resolution of monitor. (Read 3886 times)

DropDeadRui · « **on:** October 07, 2015, 08:49:14 am »

Heyooo!
So me and a pal are setting up our server chain slowly. We're wanting to make a temporary static MOTD for the time being that we can build on, using it as a background.
We've made our own graphics for it but we want the image to automatically fit the motd box no matter the users resolution. Just like how if you have a background image on windows, you can select fit to screen and it will make that image either bigger or smaller and fit.

Any suggestions?

Thanks
Rui

Bytewave · « **Reply #1 on:** October 07, 2015, 02:11:35 pm »

Well, assuming you know CSS, you could just do something like this:

Code: CSS

html,
body {
  width: 100%;
  height: 100%;
  background-image: url('/path/or/url/to/your/image/here/');
  background-size: auto;
}

Untested, and hastily scrapped out in the middle of class, but it ought to work. This would go either in a <style></style> section in your <head> section in your MOTD file, or in your stylesheet if you've already got one linked.

Aharon Tager · « **Reply #2 on:** October 08, 2015, 05:13:20 pm »

you shouldnt need the height and width attributes, i think they might even be limiting the size.

Timmy · « **Reply #3 on:** October 08, 2015, 05:59:59 pm »

Here's what I generally do when I want a full page background:

Equivalent to "Fill" setting in Windows
CSS

Code: CSS

body {
    background-image: url(//i.imgur.com/sNR8jAq.jpg); /* Include background image */
    background-size: cover; /* Equivalent to "Fill" setting in Windows */
    background-position: center; /* The center of the image, in the center of our window  */
    background-attachment: fixed; /* Image position is fixed within the viewport */
}

This is what I'd do when I want an image to fit in my viewport:

Equivalent to "Fit" setting in Windows
CSS

Code: CSS

body {
    background-color: white; /* Bg color for the parts not covered by the image */
    background-image: url(//i.imgur.com/sNR8jAq.jpg);
    background-size: contain; /* Equivalent to "Fit" setting in Windows */
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat; /* Don't repeat the background */
}

Just a heads-up if you're planning on making a custom MOTD or loading screen: The baked-in browser is equivalent to Chrome 3 (Really old). A lot of CSS3/HTML5 features don't work and require workarounds.

Ulysses

Author Topic: Re-sizing MOTD image to resolution of monitor. (Read 3886 times)

DropDeadRui

Re-sizing MOTD image to resolution of monitor.

Bytewave

Re: Re-sizing MOTD image to resolution of monitor.

Aharon Tager

Re: Re-sizing MOTD image to resolution of monitor.

Timmy

Re: Re-sizing MOTD image to resolution of monitor.