Full Background of Forum

[DarkXess]

Hey guys, how to make a full background of the forum just like here on Webflake though WITHOUT the background changer?

I noticed this thread for IPB 3.x this is also with the changer but as there is no updated version for IPB 4.x I would like to ask here.

Example of what I want to remove so that I can add a whole forum background (attached image)

Thanks

Edited September 7, 2016 by DarkXess

[titcrunch]

#ipsLayout_header header {
background: transparent !important;
}

add this too in custom.css

[Luca Munich]

Go to ACP -> Themes and the select Manage Resources on the theme you're editing. Upload your background image there and it'll give you a template tag to use.

Then visit ACP -> Themes -> Edit HTML & CSS -> CSS -> core -> front -> custom -> custom.css

body {
    background: url({resource="bgimage.jpg" app="cms" location="front"}) no-repeat center top scroll #000;
}

Change the template tag to the one the theme gives you. Change #000 to the background color you'd like. You can also edit global.css as well, but if you're not creating your own framework based off of the default theme, it's best to just override things in custom.css so you'll have smoother theme upgrades without having to redo your work.

[DarkXess]

Hey, thanks again for the help - I had already found this somewhere and tried it but it still leaves that ugly blue banner at the top and the image doesn't take over the whole background. Check image attached to see how it looks now. 

Also just noticed, the footer of the forum is black too! so its only showing the image around the mid-part but not bottom or top.

Edited September 8, 2016 by DarkXess

[DarkXess]

Bump! anyone able to help me on this? I still cant get a FULL screen background, though looking just like above image

[DarkXess]

Ok its working, but the background is only showing on the top half of the forums, how to make it cover the whole background please?

Thanks

This is the code I have now:

/* Background */
body {
    background: url({resource="abs1.jpg" app="core" location="front"})  no-repeat center top scroll #000;
}

#ipsLayout_header header {
background: transparent !important;
}

I am sure I have to edit this line somewhere: "no-repeat center top scroll"

Edit:

Fixed it, after playing around I made it to this and its now working fine:

"no-repeat center center fixed"

Thank you

Edited October 27, 2016 by DarkXess

[titcrunch]

is better to use adaptive background

 

margin:0;
padding:0;
background: url(image/bg.jpg) no-repeat center fixed; 
-webkit-background-size: cover; /* Chrome and Safari */
background-size: cover;