[Xenforo] Question Regarding Background

[clunky]

Hello! Xenforo newbie here. I don't know if this is the correct forum but It's better to put it here then in General Discussion I suppose.

Regardless I have a question that the title basically put in a nutshell, how do you go about adding a background image and using it as the background on the forums, I have tried numerous things and none have worked, hoping one of you knows how to solve this!

EDIT: "6 guests" pls

[Skipcast]

According to a quick google search you should be able to edit "EXTRA.css", add background-image property to the body.

You can find extra.css in Admincp > Appearance > Templates (might have to scroll down to see it in the list).

The css would go like this:

body
{
    background-image: url(relative_path_to_image) !important; /* path is relative to the css file. Prepend with a forward slash and write the absolute path (for example /img/background.jpg) if you're unsure where the css file is. the !important part just means it will overwrite any other properties that might target the body as well, even if they got higher priority. */
    background-repeat: no-repeat;

    /* Essentially fit to screen, make sure it looks good on all aspect ratios. */
    background-repeat: cover, auto;
    background-attachment: fixed;
}

[clunky]

[QUOTE=Skipcast;51253168]According to a quick google search you should be able to edit "EXTRA.css", add background-image property to the body.

You can find extra.css in Admincp > Appearance > Templates (might have to scroll down to see it in the list).

The css would go like this:

body
{
    background-image: url(relative_path_to_image) !important; /* path is relative to the css file. Prepend with a forward slash and write the absolute path (for example /img/background.jpg) if you're unsure where the css file is. the !important part just means it will overwrite any other properties that might target the body as well, even if they got higher priority. */
    background-repeat: no-repeat;

    /* Essentially fit to screen, make sure it looks good on all aspect ratios. */
    background-repeat: cover, auto;
    background-attachment: fixed;
}

[/QUOTE]

Would I replace the "url" text with an actual url or the file path to the image. Because when I do replace it with the "/public/styles/uix/hypernova/background.png" it doesn't change anything on the website itself

[Skipcast]

Have you tried opening dev tools (F12) and selecting the body element then checking if your styling is there?

Assuming the image exists where you wrote it's correct.

[clunky]

[QUOTE=Skipcast;51257520]Have you tried opening dev tools (F12) and selecting the body element then checking if your styling is there?

Assuming the image exists where you wrote it's correct.[/QUOTE]

It's still not appearing, here is what I currently have:

#headerMover
{
    background-image: url ("/public/styles/uix/hypernova/background.mp4"); background-size: 100% 100%;;
    background-repeat: no-repeat; !important;
}
#headerMover #headerProxy, #header, #content, #footer
{
    background-color: transparent !important;
}

See any potential errors?

[Perl]

[QUOTE=Clunky;51260152]It's still not appearing, here is what I currently have:

#headerMover
{
    background-image: url ("/public/styles/uix/hypernova/background.mp4"); background-size: 100% 100%;;
    background-repeat: no-repeat; !important;
}
#headerMover #headerProxy, #header, #content, #footer
{
    background-color: transparent !important;
}

See any potential errors?[/QUOTE]

don't think you can use mp4s as images like that, you'll have to use a full-size video tag or something for that

[clunky]

[QUOTE=Perl;51260345]don't think you can use mp4s as images like that, you'll have to use a full-size video tag or something for that[/QUOTE]

I'll replace with a .jpg and update the post.

EDIT: Didn't work, I set my background a couple days ago as grey, would somehow changing it to white fix it? xd

(incoming boxes)

[clunky]

Bump.

[brianosaur]

Its a relative path, unless your public directory is at the same level as your CSS file (it shouldn't be, because that defeats the purpose of your public directory), then the file path would be incorrect.

[clunky]

[QUOTE=brianosaur;51265937]Its a relative path, unless your public directory is at the same level as your CSS file (it shouldn't be, because that defeats the purpose of your public directory), then the file path would be incorrect.[/QUOTE]

It's not at the same level, (not that dumb lol) and the problem is still persisting.

[brianosaur]

So then check your file path. The link to the image is relative to that EXTRA.CSS file.

[clunky]

[QUOTE=brianosaur;51266771]So then check your file path. The link to the image is relative to that EXTRA.CSS file.[/QUOTE]

This is where I'm confused. Everything that you guys have been saying is correct, I don't know where the issue is rooting from but maybe it would just be best to fresh restart my forums.

[brianosaur]

so your file that you reference from in this snippet:

#headerMover
{
    background-image: url ("/public/styles/uix/hypernova/background.mp4"); background-size: 100% 100%;;
    background-repeat: no-repeat; !important;
}
#headerMover #headerProxy, #header, #content, #footer
{
    background-color: transparent !important;
}

"/public/styles/uix/hypernova/background.mp4" is the file that you reference for the image.

I assume that the file where these styles are placed are in a sub directory of the public directory.

lets say you the following file structure:
public/
- css/
- - extra.css
- javascript/
- - styles.css
- images/
- - background.jpg

if you wanted to reference the background image you'll have to have the string "../images/background.jpg".

Thats a potential issue I see with the info that you have provided.

When I say "check your file path" I mean make sure you are indeed referencing the image in the correct place.

[clunky]

[QUOTE=brianosaur;51270176]so your file that you reference from in this snippet:

#headerMover
{
    background-image: url ("/public/styles/uix/hypernova/background.mp4"); background-size: 100% 100%;;
    background-repeat: no-repeat; !important;
}
#headerMover #headerProxy, #header, #content, #footer
{
    background-color: transparent !important;
}

"/public/styles/uix/hypernova/background.mp4" is the file that you reference for the image.

I assume that the file where these styles are placed are in a sub directory of the public directory.

lets say you the following file structure:
public/
- css/
- - extra.css
- javascript/
- - styles.css
- images/
- - background.jpg

if you wanted to reference the background image you'll have to have the string "../images/background.jpg".

Thats a potential issue I see with the info that you have provided.

When I say "check your file path" I mean make sure you are indeed referencing the image in the correct place.[/QUOTE]

But the file path should be under my styles, correct?

[Fate]

Just link us to your forums.
That's the easiest way for us to figure out the correct file path.

[clunky]

[QUOTE=SataniX;51271137]Just link us to your forums.
That's the easiest way for us to figure out the correct file path.[/QUOTE]

[url]http://hypernova.site.nfoservers.com/index.php[/url]

File path for image is : [url]http://hypernova.site.nfoservers.com/styles/uix/xenforo/background.png[/url]

[brianosaur]

Those styles aren't being loaded by looking at the chrome dev tools.

[clunky]

[QUOTE=brianosaur;51271897]Those styles aren't being loaded by looking at the chrome dev tools.[/QUOTE]

Any reason why that would be happening?

[editline]27th October 2016[/editline]

Okay I finally got the image to load in (yay after 4 days) but if you look at the site it is off center and..small.. Any fixes?

[brianosaur]

It looks like you are figuring it out based on the fact that the image is loaded now those styles are on the body now

EDIT:

just set the background-repeat to repeat instead of no-repeat. Or you need to resize the image you have or find a higher resolution one.

[clunky]

[QUOTE=brianosaur;51272016]It looks like you are figuring it out based on the fact that the image is loaded now those styles are on the body now[/QUOTE]

Read the edited version of the post above if you don't mind.
Also yes the issue was is that "/public" was causing an issue. Removing it fixed it.

What is the dimension of Xenforo pages, 1920 x 1080?

EDIT: Jesus christ now for some reason it's covering the bottom 1/2 of the page wtf lol

[brianosaur]

It depends on the resolution of your screen. I'd imagine you might want different images and use media queries for different screen sizes to load a certain image based on mobile or desktop. This might be overkill though.

[clunky]

Okay if you take a look at it, it appears to be only taking half the screen up.

[editline]27th October 2016[/editline]

tml { background-color: #defaultbghexvalue; }
body {
background-image: url('/styles/uix/xenforo/background.png');
background-position: top center;
background-repeat: no-repeat;
-moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;
}

edit: If you do know the site's dimensions feel free to reply.

[Skipcast]

Add this and it should be fixed (no pun intended :v:).

background-attachment: fixed;

[clunky]

Thanks it's fixed now (Again no pun intended :v:.)

[editline]28th October 2016[/editline]

Just for people in the future (if you have this problem) add this code to your extra.css

tml { background-color: #defaultbghexvalue; }
body {
background-attachment: fixed;
background-image: url('REPLACE THIS TEXT WITH IMAGE PATH');
background-position: bottom center;
background-repeat: no-repeat;
-moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%; background-size: 100%;
}