XF 2.2 Change the background colour to an image.

[RuuDarling]

Hello there!
I would like to change the background colour to an image but I am unsure how to do that. (I've still very new to Xenforo and CSS)


I've tried another way but it only placed an image between the forums and not the sides. I want it to be able to display across the entire background, is there a way to do that? The code I used was this;

.p-body {



background-image: url("styles/default/xenforo/your-background-image.png");

}

I've tried using another one as well in page setup but it doesn't work either (no results, the top example was the only one that could work)

body{
background-image: url ('https://site.com/image.jpg');
background-repeat: no-repeat;
background-position: 50% 0;
}

If someone could help me, that would be fantastic.

Thank you!

 

[Mr Lucky]

body background is what I use when I did this, it should work

CSS Backgrounds

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[RuuDarling]

body background is what I use when I did this, it should work

CSS Backgrounds

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Thanks for the reply!
Though I don't know how to use this exactly, the codes I used were examples or suggestions to try out on other threads but they never work properly for me.

 

[TPerry]

Appearance -> Styles -> Style you are modifying - style properties
scroll down to page background


Upload your image using the little upload button, then use the CSS/LESS for either fixed or whatever specific code you want.
I have a custom location I put some images in, so if you use the upload button it will show as in data/assets location instead of like mine is set.
Suggestion... optimize whatever image you are uploading using one of the free web services before uploading it.

 

[RuuDarling]

Appearance -> Styles -> Style you are modifying - style properties
scroll down to page background

View attachment 282835
Upload your image using the little upload button, then use the CSS/LESS for either fixed or whatever specific code you want.
I have a custom location I put some images in, so if you use the upload button it will show as in data/assets location instead of like mine is set.
Suggestion... optimize whatever image you are uploading using one of the free web services before uploading it.

View attachment 282836

Hey!
So this does work in some manner but it's still not spreading across the page for some reason. I used a web service as well and it shows the image but still the same reason. Although the image itself is a jpeg and not a png, I don't know if that has anything to do with it.
When I just put this code in, it just breaks everything

background-attachment: fixed;
background-image: URL ("myurllink");
background-position: right top;

But when I put this code in with the additional code above, it still looks like this (Its just add as it's the only one that's getting results but not what I want)

.p-body {

background-attachment: fixed;
background-image: url("myurllink");
background-position: right top;

}

If I get rid of the .p it just reverts back to normal and nothing happens.

 

[TPerry]

Depends on what you are trying to do with it as to what CSS/LESS code you will use.
Not every image works "perfectly" as a background without the correct CSS tweaking.
Mine is a small graphic that can be seamlessly tiled.... it's not one large image.

 

[RuuDarling]

Depends on what you are trying to do with it as to what CSS/LESS code you will use.
Not every image works "perfectly" as a background without the correct CSS tweaking.
Mine is a small graphic that can be seamlessly tiled.... it's not one large image.

Well I'm trying to make it extend to the sides as well like I said in my original post. I want it to be able to display across the entire background

But it's not doing that, so I guess I'm asking if there is a way to make it extend to the sides as well?
I've tried with other images as well, smaller, bigger, resizing etc but it's just staying in one place behind the forum bits while the sides remain blank
I'm under the impression it may be a custom style thing, but still unsure

 

[TPerry]

You miss the point... is the image one SINGLE image you are wanting to cover the entire page, or is it an image you are wanting to tile?
Be aware, stretching images to cover an entire page can either cause loss of parts of the image, or in cases distortion to the image if the wrong CSS code is used.
object-fit:cover;
object-fit:contain;
Or you can experiment with the width:auto and or height:auto CSS parameters.
Give a link to your site, and the link to the image you are trying to use.

 

[RuuDarling]

You miss the point... is the image one SINGLE image you are wanting to cover the entire page, or is it an image you are wanting to tile?
Be aware, stretching images to cover an entire page can either cause loss of parts of the image, or in cases distortion to the image if the wrong CSS code is used.
object-fit:cover;
object-fit:contain;
Or you can experiment with the width:auto and or height:auto CSS parameters.
Give a link to your site, and the link to the image you are trying to use.

Oh okay
The image is just one single image trying to cover the whole page. Would tiles be better in this case?

this is the image here

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

and this is the site: https://www.osriaroleplay.com/

 

[TPerry]

Best suggestion... since it is a XenFocus style, ask in their support thread. They may do some customizations that won't work as a default style (or even other styles) would.
Looks like Dimension Dark.
Generally when needed help with paid styles or add-on (paid or free), it's recommended to seek help in the appropriate discussion thread for it.
I can tell you they are doing something specific, as if you add the !important after your image in the pagewrapper, it shows up on those outside borders.... but once more, check with @Ehren in the support discussion linked above.

 

[RuuDarling]

Best suggestion... since it is a XenFocus style, ask in their support thread. They may do some customizations that won't work as a default style (or even other styles) would.
Looks like Dimension Dark.
Generally when needed help with paid styles or add-on (paid or free), it's recommended to seek help in the appropriate discussion thread for it.
I can tell you they are doing something specific, as if you add the !important after your image in the pagewrapper, it shows up on those outside borders.... but once more, check with @Ehren in the support discussion linked above.

View attachment 282858

Okay, thank you! I will try there

 

[TPerry]

Okay, thank you! I will try there

@Ehren is pretty good at support.... He's the only style developer when I ran IPS that I would consider.