MyBB Community Forums

Full Version: Adding a background picture
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi!

I have tried Google and searching this forum but have not found a solution that seems to work.

I am using MyBB 1.8 with the default them, though the flame colour scheme. What I am trying to do is set a background picture which should show for every page with the thread boxes and other information boxes overlaid.

I would prefer to use CSS to put the picture in place though I am happy to go in to the PHP template and do it if needs be. At the moment I am not sure if I will use one static picture or an image repeated.

The forum is at https://palacecomrades.com

Thanks in advance.
Hi,

Admin Control Panel > Templates & Style (Tab) > Themes > Your Theme > global.css > Edit Stylesheet: Advanced Mode (Tab)

Search for:
#content {
    background: #fff;
    width: auto !important;
    padding: 20px 10px;
    overflow: hidden;
}

And replace it with:

#content {
   background-image: url("/path/to/yourimage.jpg");
   background-repeat: no-repeat;
   width: auto !important;
   padding: 20px 10px;
   overflow: hidden;
}

Of course the path to where your image is and the name of the image, it's up to you  Wink 

Extra: if you want to repeat the background image change the value "no-repeat" to "repeat" or "repeat-x" or "repeat-y".
(2019-04-26, 05:13 PM)NoRules Wrote: [ -> ]Hi,

Admin Control Panel > Templates & Style (Tab) > Themes > Your Theme > global.css > Edit Stylesheet: Advanced Mode (Tab)

Search for:
#content {
    background: #fff;
    width: auto !important;
    padding: 20px 10px;
    overflow: hidden;
}

And replace it with:

#content {
   background-image: url("/path/to/yourimage.jpg");
   background-repeat: no-repeat;
   width: auto !important;
   padding: 20px 10px;
   overflow: hidden;
}

Of course the path to where your image is and the name of the image, it's up to you  Wink 

Extra: if you want to repeat the background image change the value "no-repeat" to "repeat" or "repeat-x" or "repeat-y".

Brilliant! Thank you very much for your help, you're a diamond! Smile

(2019-04-26, 06:02 PM)ceitinn Wrote: [ -> ]
(2019-04-26, 05:13 PM)NoRules Wrote: [ -> ]Hi,

Admin Control Panel > Templates & Style (Tab) > Themes > Your Theme > global.css > Edit Stylesheet: Advanced Mode (Tab)

Search for:
#content {
    background: #fff;
    width: auto !important;
    padding: 20px 10px;
    overflow: hidden;
}

And replace it with:

#content {
   background-image: url("/path/to/yourimage.jpg");
   background-repeat: no-repeat;
   width: auto !important;
   padding: 20px 10px;
   overflow: hidden;
}

Of course the path to where your image is and the name of the image, it's up to you  Wink 

Extra: if you want to repeat the background image change the value "no-repeat" to "repeat" or "repeat-x" or "repeat-y".

Brilliant! Thank you very much for your help, you're a diamond! Smile

One final question, how would I go about centring the picture along both axis?
Hi,

if you want to center the image:

#content {
   background-image: url("/path/to/yourimage.jpg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center; 
   width: auto !important;
   padding: 20px 10px;
   overflow: hidden;
}
Thank you very much. It is much appreciated.