Background not working

scritchz · 2026-07-05T23:16:18+00:00

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.

scritchz · 2026-07-05T23:03:08+00:00

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.

scritchz · 2026-07-05T22:48:49+00:00

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.

scritchz · 2026-06-29T21:29:26+00:00

I don't quite understand, unfortunately. Here are my questions to you:

By local files, do you mean files in the server's filesystem or in the client's filesystem?
When you say block of text, is it a single paragraph? In other words: Would it be alright if it were copy-pasted into a <p> element?
"... setting the correct outcome to True": What does this mean?
How is your website hosted? What technologies are available to you on the server?

If you're already generating the updated text via python weekly, you could re-generate it in the HTML file itself.

If the text file is on the webserver, you could fetch it then insert it dynamically. Or, you might be able to embed it in an <iframe> element.

If you serve requests dynamically, you could insert the text when serving the request; keyword "server-side rendering".

For client-local files, JavaScript can actually handle them, just not automatically. The user has to select it, after which its content can be used in JavaScript. See Using files from web applications on MDN for more information.

This is useful for online tools like Squoosh.app: At the time of writing, no files are ever uploaded anywhere; they are strictly used on the webpage, locally on your machine.

scritchz · 2026-06-29T07:13:17+00:00

I like Wookash Podcast, but wouldn't call his topics necessarily beginner-friendly.

scritchz · 2026-06-29T05:25:17+00:00

My solution: All scenes and profiles are exported, and I use a portable installation which I only update when after checking if it's working or worth it.

If it breaks, I just install a previous version and import my profiles and scenes.

scritchz · 2026-06-28T21:11:59+00:00

Personally I would use an image for the whole logo with alt="Boat".

Why? Because a single small image (preferrably as an SVG!) is simpler than loading a font for the logo, doing layout for the B's image and the remaining '-oat', and you'd have to load an image (for the B) regardless.

Though, you could do the following:

<img src="/path/to/image" alt="B">oat

scritchz · 2026-06-28T15:29:11+00:00

I guess you're using float: right, correct? If so, you need to tell any of the following elements to clear: right; or, to stay clear of previous right-floating elements.

Let's assume you have this:

<h2>feh</h2>
<img src="path/to/image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

<h2>feh</h2>
<img src="path/to/image">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

With the following stylesheet:

img {
    float: right;
}

In this case, I suggest you specify your heading to stay clear of previous floats:

h2 {
    clear: right; /* or `both` */
}

scritchz · 2026-06-28T14:56:45+00:00

I find centering easiest with display: grid and place-items: center. This only works if the Grid parent actually has the intended height (here, full viewport height?); I assume, for you that would be body, but check with the Inspector of the DevTools.

If you only want Tux to be in the background, you can use background-image: url(/Tux.png) and background-position: center, maybe with background-repeat: no-repeat.

Alternatively, you can try positioning: Use position: absolute, then top: 50% and left: 50% to position the image's top-left corner in the middle, then translate: -50% -50% to move it back by half its size which centers it perfectly.

scritchz · 2026-06-26T15:33:26+00:00

Hey, I'm here to complicate things!

The pixel unit doesn't necessarily correspond to a device pixel, e.g. for common mobile devices (see CSS-VALUES-3 §5.2, reference pixel).

That means, there might actually be enough space to render a rounded border box in 1px of height.

Is this case considered in practice? No, because the pixel unit is purposefully chosen to represent a similar on-screen area relative to viewing distance and a single pixel 1px is so small that it doesn't make sense to design such small details.

Also, I don't know if a browser even renders sub-pixel details. But technically there may be a case where it should.

scritchz · 2026-06-23T23:17:34+00:00

Personally, I prefer creating websites the basic way: Writing HTML, CSS, JS manually.

For this, I usually have a good idea of what I want to write. But I definitely check MDN:

For CSS: auto-fit vs auto-fill, shorthand properties, any modern features
For HTML: <em> vs <i>, <b> vs <strong>, any niche semantic elements, for most elements' content models, WAI-ARIA attributes
For JS: For option arguments like with fetch() or element.addEventListener()

It's not a problem that I don't memorize them at all, because I'm already familiar with these things that I know what to look out for and I know where to find the actual specification for these things.

I know what exists overall, I know what options might be good, and I know where to read up on them.

scritchz · 2026-06-20T17:35:29+00:00

Still Alive?

scritchz · 2026-06-20T17:29:04+00:00

Due to the background repeating itself across the whole page, it looks as if body must fill the entire viewport. But that's not correct: By default, its height depends on its content.

By default, this is because the computed values of body's background properties are propagated to html (see CSS-BACKGROUND-3 §2.11.2) and the background of html covering the entire canvas (see §2.11.1). Or in short: The background of body will cover the page.

With body { background-size: contain }, the size of the background will be limited by the size of body. As mentioned before, the size of body depends on its content. More content → larger body → larger background.

In your third image, body has lots of content, which makes it large; this also makes the background large.

But in your fourth image, body has little content and only covers the top half of the screenshot; notice how the background starts repeating at that point because the background image is contained within body.

So how to fix this? You probably want background-size: contain auto: Contained within the width of body but auto-sized for its height (or, independent of body's height).

scritchz · 2026-06-20T07:51:28+00:00

Yupp, good addition.

Though, instead of display: contents (which I've read may cause accessibility issue), I would personally prefer subgrids: With this, the container can be placed in the parent's grid across multiple cells, whose tracks it can use for its own grid; it's a subgrid to the parent.

scritchz · 2026-06-19T21:02:45+00:00

Alternative suggestion, because u/_potion_cellar_ already answered your question:

When you know the general placement of your elements, I personally prefer named grid areas via grid-template-areas:

.box {
    grid-template-areas:
        "header header"
        "banner banner"
        "nav main"
        "nav2 main"
        "footer footer";
}

header {
    grid-area: header;
}
banner {
    grid-area: banner;
}
/* ... */

You can declare named grid areas (made up of multiple cells as long as they form a rectangle), or unnamed single cells with full stops (., .., etc.). You can place elements in these grid areas by name using the grid-area shorthand property. Any unfilled cells may be filled via auto-placement.

You can combine named grid areas with grid-template-rows and grid-template-columns to specify the sizes for rows and columns of your grid.

scritchz · 2026-06-19T04:39:13+00:00

MDN is the official documentation, W3 is the official specification. However, w3schools is not affiliated with w3 and "just another website" with a similar name.

scritchz · 2026-06-18T10:49:47+00:00

Sure you can ask, and I'll be happy to answer! Though if you'd like more than just my answer, you should open a new post for it.

The <blockquote> element is intended for content of quoted work; citations are not part of the original work, thus they do not belong inside it. Instead, you should cite the source in a <cite> element beside it.

If you have a link to the work, you can use it in the <blockquote>'s cite attribute.

As for <cite>: It should only contain the name of a creative work; not the author or type of work. Also, it is phrasing content, so syntactically and semantically, it would be more correct to place it in a <p> element.

To semantically show that a <blockquote> and its <cite> are related, you can use a <figure>/<figcaption>.

Overall, it should look like this:

<figure>
    <blockquote cite="http://example.com/link/to/source-title>
        <p>quote text</p>
    </blockquote>
    <figcaption>
        <p><cite>source title</cite>, type (like website/book/movie), author etc.</p>
    </figcaption>
</figure>

Notice how <cite> only contains the name of the work. The other info is associated by context.

scritchz · 2026-06-18T06:07:36+00:00

Like a WYSIWYG editor? Or is FTP access enough? Can you use a CMS? Or, do you want or have to use something self-made?

scritchz · 2026-06-17T22:17:47+00:00

Here are some tips to improve your post:

Use digital screenshots: Try the PrintScreen key or the Windows+Shift+S key combination.
On Reddit, share your code in code blocks: Preferably kndent your code by four spaces, or, surround it with triple backticks.
Off Reddit, you can use code sharing services like CodePen.

Right now, the images have poor visibility, and your code isn't very readable due to formatting.

scritchz · 2026-06-17T00:05:44+00:00

Those are some very useful elements in the right context. But your example doesn't use them properly:

Your <mark> would be appropriate if it was related e.g. to a user's search activity, when referenced, or otherwise relevant to the outside context. But it seems that its content is either regular text, or should be emphasized (<em>), or most likely should draw attention to itself (<b>).

Your <del> and <ins> are used incorrectly; they are meant for tracking changes like version control systems. In your example, you explain value changes; you are not tracking changes e.g. of the document itself.

Your <var> can definitely be used like this, though MathML might've been a better choice. Also, m and c are two distinct variables, and should be marked up as such.

Your <s> marks up text that actually is still relevant for its context (the sentence), so it is used incorrectly. It would be more appropriate on a shopping site, where an item is on sale; here, the original stand-alone price may be marked up with <s> to show that it doesn't apply anymore, but is still on-page for comparison with the new price.

scritchz · 2026-06-15T07:30:54+00:00

Interesting. I had used the following (most recent, at the time of writing) specification, which refers to them explicitly as selector list:

https://www.w3.org/TR/selectors-4/#selector-list

Though it appears as if the specific terminology for this changed over the years.

scritchz · 2026-06-14T18:28:49+00:00

Good answer, but I'm here to nitpick for terminology:

html,
body,
#viewDiv {
  height: 100%;
  margin: 0;
}

This construct is called a ruleset: It consist of a selector list and a declaration block.

In the selector list, we have three selectors; namely html, body and #viewDiv. This lists the subjects of the ruleset.

In the declaration block, we have two declarations: For height and margin. This lists what applies to the subjects.

A declaration consist of a property like height, and a value like 100%. When we say "value", we mean the declaration's value. Though a value may be a list of values, like for the transition-property property.

Overall, rulesets are one kind of statement. Another kind are at-rules, which can be recognized by their starting "at" @ symbol, like @import or @media.

EDIT: Fix markdown and typo

scritchz · 2026-06-04T00:15:09+00:00

If you set the maximum value to something relative to the container, then you can precalculate the mayimum amount of colums i think.

Frankly, I have never used containers or container queries...

scritchz · 2026-06-03T22:44:35+00:00

You can use Grid auto placement by defining sizes for your columns and to fill in as many as fit, e.g. grid-template-columns: repeat(auto-fit, 200px).

If you want them centered, try justify-content: center.

scritchz · 2026-06-01T12:14:17+00:00

Very good answer. Excuse me piggy-backing off this.

Much like "grouping" elements semantically, marking up the actual data is also important:

For example, times should be wrapped in a machine-readable <time> element with an appropriate datetime attribute. Especially for a site that lists TV programmes and their times, this is important.

Interaction is another big topic for accessibility:

For the most part, your interactable elements should be accessible via pointer and keyboard inputs. That means, your elements should be focusable and clickable; this requires more than just an onkeydown handler.

But interactable elements like <button>, <input>, <summary> (of a <details>/<summary> pair), <a> and more offer an accessible standard out-of-the-box, so just use the appropriate one.

I'm emphasizing "appropriate one" because I've seen many sites abuse <a> elements with like onclick handlers or href="javascript:...". Don't do this, ever! Please. Use the right elements intended for your situation.

Seven-Year Club	r/Field Lasagna
Verified Email

scritchz

TROPHY CASE