r/css

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;
  }

ive tried some media queries but none of them change the layout of my site on mobile..not sure what im doing wrong but maybe someone here can help. my website is https://phlygm-planet.neocities.org/ and codepen: https://codepen.io/editor/Yousra-Nimour/pen/019f2f8e-e1dd-7f7e-a5e5-a3effb410785

hi guys, is there a way to set the kofi widget above my footer? i cant figure out how do it. for reference the link to my site is https://phlygm-planet.neocities.org/

ive tried some media queries but none of them change the layout of my site on mobile..not sure what im doing wrong but maybe someone here can help. my website is https://phlygm-planet.neocities.org/

If you're building ChatGPT-style apps, Claude wrappers, or local agent UIs, you probably need loading states that match the vibe.

Generic spinners feel wrong next to a terminal prompt. So I added 9 ASCII loaders to loading-ui:

• terminal: > + blinking block cursor (classic CLI feel)
• accordion-loader, conveyor-loop, symmetric-wave: animated unicode block trails
• square-grid, square-snake, infinity-track: path-based unicode animations

All React components, copy-paste install, MIT licensed.

npx shadcn add @loading-ui/terminal

Use cases I had in mind:

• "Generating code..."
• "Running agent..."
• "Deploying..."
• Streaming tool call status

Live previews: https://loading-ui.com Open source: https://github.com/turbostarter/loading-ui

Anyone else building AI dev tools? What do you use for pending states while the model thinks?

As you can see in the screenshot, my footer isnt showing up on the complete bottom of the page; theres some space between the end and the footer. The KoFi widget also shows up under the footer and the footer goes over my music player as well. Id like the kofi widget and my music player to show up on top of the footer, and the footer to be on the complete bottom of the page with nothing under it or on top of it if that makes sense. https://phlygm-planet.neocities.org/ is my website link.

I've been messing around with using ChatGPT and Perplexity to translate Figma specs into CSS, but honestly it’s a whole different game now compared to even a year ago. Manual pixel-peeping? That’s pretty much dead for standard layouts tools like Figma Make and Code Connect auto-generate semantic CSS/HTML, and stuff like Builder.io or Locofy just translates variables straight into Tailwind. For the AI part: GPT-4o and Perplexity Pro are actually solid for nuanced styling these days if you’re getting flaky output, it’s probably because your prompt’s too vague rather than the model sucking. Perplexity’s more for digging up spec context, not a direct code translator unless you’ve set up custom plugins. So yeah, I’m getting usable code now with a bit of prompt finesse. Anyone else finding it smooth sailing, or still tweaking more than coding from scratch?

https://codepen.io/programoreno/pen/dPNVwJe

I kept forgetting the exact syntax for conic-gradient and repeating-radial-gradient so I ended up building a little reference page with actual rendered examples instead of just reading MDN for the tenth time.

It covers linear, radial, conic, and the repeating versions of each, plus a section on layering multiple gradients together (like the dark overlay trick for background images) and a pie chart made purely with conic-gradient stops. Every card has the rendered result next to the exact CSS, and I added a copy button so you don't have to select text manually.

Also threw in a color palette section at the bottom with all the hex values used, in case anyone wants to steal a combo.

Curious if anyone has gradient tricks I'm missing, especially around performance with multiple layered radial-gradients, I haven't stress tested that yet.

Logseq stores everything as plain .md files, but if you ever open one of those files directly on iOS (from Files, iCloud, Dropbox, a backup, etc.) you just get raw text. I built a small viewer to read them rendered on a phone.

Md Preview:

• Renders GitHub-Flavored Markdown — headings, tables, task lists, footnotes

• Code blocks with syntax highlighting, plus LaTeX math and Mermaid diagrams

• Opens .md / .markdown / .mdx / .rmd / .qmd from Files or the Share Sheet

• 100% on-device — no account, no uploads, no ads, no subscriptions

Free on the App Store: https://apps.apple.com/app/id6760341080

Details: https://markdown.cybergame.ai/

Not a Logseq replacement at all — just a quick way to read loose .md files when you're away from the desktop app. Curious how you all read your graph on the go.

Hai, I wanna have a custom cursor 4 my site on Neocities ( https://phlygm-planet.neocities.org/ ) but it's not showing. I attached a ss of my current CSS code, I honestly have no idea why it's not showing up. Should I have something in my HTML? All the tutorials I looked at only mentioned CSS code, Ive tried a few of them and nothing seems to work. The cursor stays as the default one.

https://www.youtube.com/watch?v=nTFn685jlRw

So I've followed the code exactly and here is what I get.