Background Image REFUSES to show!!

[Critterlover57]

Hi, Guys!

Well, after wrestling with trying to change my background from a color to an image for HOURS, I came to the forums and spent a couple more trying to find a solution, and according to EVERYTHING I can find, I have done everything right, yet the background REFUSES to show!! I am using the default Curve theme and SMF version 2.1.4. I have edited index.css and this is what I have ...

body {
    background-image: url(".../public_html/forum/Themes/default/images/pawprintsh5.jpg")repeat-x,y; important!
    background-attachment: fixed;
    font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
    color: #4d4d4d;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
   
I actually have my entire site path written out, but the forum wouldn't let me post this that way. I have tried it without (important) too. What am I doing wrong? PLEASE HELP!!

Many Thanks,

Critterlover

[Kindred]

The !important must be INSIDE the semicolon


And the exclamation goes before the statement

[Critterlover57]

Thank you so much for replying, however, I fixed it the way you said and did a hard refresh and it still doesn't show. I just can't understand why. Any other thoughts?

[Critterlover57]

I just saw that you posted this: "SMF 2.1.x has a minified version of CSS.  You have to turn this OFF when you change CSS in order to have the changes take effect" in reply to another user having the same problem.

Can you please tell me HOW I can shut this OFF?

THANK YOU!

[Diego Andrés]

Admin > Features and options > Minimize CSS and JavaScript files

[Critterlover57]

Thank you! Found it, disabled it. Did a hard refresh, still no go. I do have the color changer mod, and I have seen some people have trouble with it interfering with the background image years back, but I tried a fresh install and it still won't work.

Any ideas? This is MADDENING?!

Thank you!

[Diego Andrés]

This doesn't seem right:
background-image: url(".../public_html/forum/Themes/default/images/pawprintsh5.jpg")repeat-x,y; important!

1. The url is relative to the file path, so you should just navigate a directory up. E.g: url("../images/pawprintsh5.jpg")
2. background-image only takes one value, it's not a shorthand like background. So you need to either use image, or move your other values to their explicit properties:
background-image: url("../images/pawprintsh5.jpg");
background-repeat: repeat-x;

And well, you can add !important to each as you see fit. But I assume that if the value that overwrites the background is simply using background and not background-color, then you need the shorthand.
background: url("../images/pawprintsh5.jpg") repeat-x fixed !important;
(and remove background-attachment?).

[Critterlover57]

OOOOOHHHHH! That got it to show all the way across the top, but not the rest of the page! We're making progress!  Can you tell me the code to get it to repeat in both directions? I assume that should fix it?

THANK YOU SO MUCH! I have been at this ALL DAY AND ALL NIGHT!!

[Critterlover57]

I GOT IT!

Thanks for the help!

[Diego Andrés]

Awesome!

[Critterlover57]

Hey, Everyone!

I am so sorry to keep bugging you guys, but I had to do a fresh install in order to chase down some errors I was getting, and I THOUGHT I could just repeat my steps from yesterday and I'd be fine. Well, that's what I get for thinking, cuz once AGAIN, even though I think I followed the steps here and thensome, the background simply refuses to show AGAIN. Can someone PLEASE help just once more? I am modifying index.css and this is what I have ...

body {
   background-image: url("https://thebetterrescuebureau.com//public_html/forum/themes/default/images/pawprintsh5.jpg");
   background-repeat: repeat;
   font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
   color: #4d4d4d;
   display: flex;
   flex-direction: column;
   }

Linking the full path was a last resort, but it didn't work. Can someone please paste what I should have here instead?

Many Thanks, for everything, Guys!

[Critterlover57]

I saw the problem with the extra forward slash when I posted it. So, I took it out, still no change.

[Diego Andrés]

The issue is again the image path, you're using your forum path, you should use the relative path.

1. The url is relative to the file path, so you should just navigate a directory up. E.g: url("../images/pawprintsh5.jpg")

[Kindred]

or you can use the whole URL...   but not a mixture of the URL and path...

Side note: Also remember to TURN OFF the minification of the CSS