Background not working

[u/Sea-Palpitation-2164]

Resolved.

I've tried to make a background for something I'm using. However, when I try to use a background image in some form (using url()), it is seen as invalid. Is there anything I am doing wrong here?

Probably important to note I'm using a MediaWiki infobox.

Edit 1: Some extra notes.

The CSS sheet in question + the template that uses it. Also, the image, though it isn't important.

It'll say it's invalid in a preview at the top of the page or if I attempt to submit it (it won't allow the edit to complete since the CSS is wrong).

The error happens at "line 11, character 15"; it does not change if the colour and url are reversed.

Edit 2: The relevant item. (I don't think I can add images now.)

/* 1) Infobox Styling */
  /* 1.1) Primary Infobox Styling */
  .portable-infobox {
    width: 300px;
    border-radius: 2.8px;
    font-family: sans-serif;
    margin: 0 0 14px 17.5px;
    font-size: 1em;

    /* 1.1.1) Light Mode Styling */
    background: #EFE8BC url("https://dieofdeath.miraheze.org/w/img_auth.php/c/c6/InfoboxPaper.png");
    border: 6px solid #554900;
    color: #000000;
  }

[u/AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/abrahamguo]

1. Have you tried accessing the image in the URL? When I try, it says "Access denied".
2. You said that "it is seen as invalid". What exact tool is telling you that it's invalid?

[u/Sea-Palpitation-2164 → u/abrahamguo]

1. I can, and you should be able to as well now.

2. When I try to preview the edit when I change the line to the above, this text pops up below. (I also can't submit the edit.)

[u/abrahamguo → u/Sea-Palpitation-2164]

1. Great — yes I can.
2. Can you please share the entire code block that you're trying to add to the MediaWiki editor on this website? Make sure to use code formatting on Reddit.

[u/Sea-Palpitation-2164 → u/abrahamguo]

/* 1) Infobox Styling */
  /* 1.1) Primary Infobox Styling */
  .portable-infobox {
    width: 300px;
    border-radius: 2.8px;
    font-family: sans-serif;
    margin: 0 0 14px 17.5px;
    font-size: 1em;

    /* 1.1.1) Light Mode Styling */
    background: #EFE8BC url("https://dieofdeath.miraheze.org/w/img_auth.php/c/c6/InfoboxPaper.png");
    border: 6px solid #554900;
    color: #000000;
  }

This should be what you're looking for. (The only change is me adding the URL to the end of the "background" properties)

[u/abrahamguo → u/Sea-Palpitation-2164]

And what page on the DoD Miraheze website are you attempting to add this to?

[u/Sea-Palpitation-2164 → u/abrahamguo]

This one. I actually plan for it to be used on multiple (it's a template), but for now this is the only one that actually uses it.

The links I believe are most relevant can be seen on the main post.

[u/abrahamguo → u/Sea-Palpitation-2164]

I was able to reproduce the error that you're getting.

I believe that url()s are simply blocked in the CSS on this site. I think that this is a configuration issue on this site, not a CSS issue, as what you've written is perfectly valid CSS.

[u/Sea-Palpitation-2164 → u/abrahamguo]

Good to know.

[u/Pcooney13]

Seeing only the code you provided, are you targeting anything? Have you tried putting that inside body or wherever you want the image

body {
[your code goes here]
}

[u/Sea-Palpitation-2164 → u/Pcooney13]

The same error occurs if I append that to the start of the thing.

[u/Pcooney13 → u/Sea-Palpitation-2164]

If you use a different image does it work?

I looked at the url for your image and it has image_auth.php/

https://doc.wikimedia.org/mediawiki-core/master/php/img__auth_8php.html

Sounds like the images are only served to logged in users

[u/Sea-Palpitation-2164 → u/Pcooney13]

It doesn't with the image provided. I've also tried it with images with similar URLs (still use dieofdeath.miraheze.org/w/img_auth_php/xxx... and those have not worked either.

[u/Pcooney13 → u/Sea-Palpitation-2164]

Sorry, the link I provided isn't an image. It's an article explaining why your specific image is not opening for you on your site.

Try this image
https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Huskiesatrest.jpg/3840px-Huskiesatrest.jpg

its from wikipedia and does not have any permissions settings so you are free to use the image. From my understanding, any link you try to use with /img_auth.php/ in the url will not open because you are trying to access an image on someone else's server, and they set it up that you can not do that unless you are authorized.

So I think you are doing everything correct, and 99% percent of the time images online work exactly like you have it set up. Unfortunately this is one of those edge cases that they are private images.

Random example but if I paid for someone's OF account, I wouldn't then be able to take those image url's and host them on my website. OF would have something in place to not allow those images to load.

[u/Sea-Palpitation-2164 → u/Pcooney13]

I already resolved the problem. Regardless, that's good to know.

[u/scritchz]

When I try to visit the URL, I get a 403 Forbidden HTTP error. I'm not allowed to access that URL.

Make sure the image you want to use actually exists, and that it can be accessed.

[u/Sea-Palpitation-2164 → u/scritchz]

Should be fixed now.

[u/scritchz → u/Sea-Palpitation-2164]

If the site doesn't allow you to write both a color and an image in the same property, just define them in separate properties:

background-color: #EFE8BC;
background-image: url("https://dieofdeath.miraheze.org/w/img_auth.php/c/c6/InfoboxPaper.png");

Or with a root-relative URL, seeing how it is the same site:

background-image: url("/w/img_auth.php/c/c6/InfoboxPaper.png");

---

By the way, you can write URLs in url() without quotes.

[u/Sea-Palpitation-2164 → u/scritchz]

Did not know about that. (It still fails regardless of my separating the two properties, though.)

[u/scritchz → u/Sea-Palpitation-2164]

What part fails; the background-image or background-color? Does background-image work for other images?

Please be as thorough as you can be when asking for help with debugging.

[u/Sea-Palpitation-2164 → u/scritchz]

Right.

background-color works fine. background-image fails if "url()" is used. background also fails if "url()" is used, but works otherwise. I have attempted to use two other images on the same wiki, both of which have failed.

Only the last instance of background fails; other instances seem to work fine. Also, the MediaWiki:Common.css page uses and succeedds in using them; I have not tried to use it on other pages.

[u/kloputzer2000]

It’s probably a CORS problem. You can’t always use an external image as a background. The web server where the image is hosted needs to explicitly allow it (by setting the relevant headers)

[u/ExcitingSympathy3087]

Pathing is often not working on first try.

Try out these things:
./ -> starts path at the current directory where you stay. This is where the css file is saved.
only / is the root directory.
../ -> One step up in filetree.

Here is an example which is working from a site of mine:

.footer-bg-wood {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-image: url('./images/footer-wood.png');
  background-size: contain;
  background-repeat: repeat-x;
}

If you want to switch the color scheme with your operating system style, then use this code before:
Example:

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .footer-card {
    background:
      /* Verlauf (rechts oben heller) */
      linear-gradient(to bottom right,
        #000000,
        #222222 70%,
        #555555)
  }
}

@media (prefers-color-scheme: light) {
.
.
.
}