How to change background only for "HOME"? [URGENT] [Autofocus Theme]

use the css class .home that got created by body_class()

add to style.css:

body.home { background: different-lol; }

Where would i add that? In the structure?

body {background-color: #000000;
background-image: url("https://i52.tinypic.com/2j3hbtd.jpg");
background-repeat: no-repeat;background-position:center top;background-attachment: fixed; top;color:#444;font:1.4em/1.6 "Helvetica", "Hoefler Text", "Georgia", Georgia, sans-serif;margin:0;padding:0}
#wrapper{padding:0;margin:0 auto;width:800px;position:absolute;
left:200px;
right:200px;display: fixed }/*

basically, anywhere, as this is a new style with a higher priority than exising ones.

however, to add it in the structure is a good place, maybe just after the body style, before the #wrapper style.

For some reason, the new style is not taking a higher priority than the one previously there.

Currently, the image found in:

body {background-color: #000000;
background-image: url("https://i52.tinypic.com/2j3hbtd.jpg");

is still showing, and the picture or color in “body.home” is showing behind that. I know that because if I zoom out far enough, I can see the new color leaking on the sides. How can I change this so the body.home takes priority on the home page?

This is what my structure looks like now:

/*structure*/
body.home { background-color: #676754; }
body {background-color: #000000;
background-image: url("https://i52.tinypic.com/2j3hbtd.jpg");
background-repeat: no-repeat;background-position:center top;background-attachment: fixed; top;color:#444;font:1.4em/1.6 "Helvetica", "Hoefler Text", "Georgia", Georgia, sans-serif;margin:0;padding:0}
#wrapper{padding:0;margin:0 auto;width:800px;position:absolute;
left:200px;
right:200px;display: fixed }/*

Thanks alchymyth! It truly helps and I appreciate it!

Nevermind, I figured it out. Thanks for your help!

Hello Moid93.

What was the solution you figured out. Please share so others can benefit from this as well.

Thanks!

the first change only changed the background color in body.home – and the background image from body was still showing and covering the color.
see here:

body.home { background-color: #676754; }
body {background-color: #000000;
background-image: url("https://i52.tinypic.com/2j3hbtd.jpg");
background-repeat: no-repeat;background-position:center top;background-attachment: fixed; top;color:#444;font:1.4em/1.6 "Helvetica", "Hoefler Text", "Georgia", Georgia, sans-serif;margin:0;padding:0}

possible solution – to use the Background – Shorthand property:

body.home { background: #676754; }
body {background-color: #000000;
background-image: url("https://i52.tinypic.com/2j3hbtd.jpg");
background-repeat: no-repeat;background-position:center top;background-attachment: fixed; top;color:#444;font:1.4em/1.6 "Helvetica", "Hoefler Text", "Georgia", Georgia, sans-serif;margin:0;padding:0}

now, the body.home style is overwriting the full background style.

https://www.w3schools.com/css/css_background.asp

Thank you Alchymyth for sharing! I was thinking that perhaps this would work with the Twenty Ten theme but no it did not work.

@alchymyth & moid93 – could you be more specific about the solution? i don’t quite understand where should i operate this change (for example i do not have a /*structure*/ chapter in my style.css, the code is almost the default one from the original autofocus+ pro template).
i would really really love to be able to change the default one-color background.

the blog is https://remgriff.ro/

Thank you very much!!!

anyone, please?