Background image

We're Getting Mutants in the MCU - The Loop


The main background image for a wiki should scale to whatever size the user screen is. That said, what do you do if your own monitor/graphics card is not that great? Here are a few tips:

You can use the Ctrl key along with the - key to shrink the image on your screen, repeatedly if necessary. This will give you a very good idea of whether or not your choice of CSS for the background image actually scales, or if it results in an image that is abruptly cut off for users who have better monitors / resolution. (Ctrl and 0 resets it)

CSS tips


body {
    background: #000000 url( no-repeat fixed center top;
    background-size: cover;

Scaling to width

If your background image fades nicely to transparent or the default background color, you can simply have it scale to width (or height).

body {
    background: #000000 url( no-repeat fixed center top / 100% auto;

Exceptional circumstances

If, for some reason, your background image cannot be scaled, then it should fade to either transparent or the default background color at (minimally) the right, left and bottom borders (assuming that you place it at the top of the page). This at least provides for a graceful transition on larger monitors.

Community content is available under CC BY-NC-SA 3.0 unless otherwise noted.