Board Game Arena

Hello everyone,

I'm having a problem where the background image I've specified for a div is not displaying. Below are the relevant snippets of my HTML and CSS code:

TPL file:
<div id="board">
</div>
CSS (in tutoricalnovbee.css):

#board {
width: 536px;
height: 528px;
background-image: url('img/board.jpg');
position: relative;
margin: auto;
}
The img directory is located at the root of my website, at the same level as my HTML file. I've tried the following things:

Checked that the file board.jpg exists in the img directory and the path is correct.
Made sure there are no CSS specificity or override issues.
Cleared browser cache and tried different browsers.

F12 is your friend!

Inspect your page html.

Is the div really here ?
What does the inspector say about CSS ?

You need to double check the name of the image and check that you uploaded it.

This url gives 404
https://studio.boardgamearena.com:8084/ ... /board.jpg

while a known image is reachable (even if I don't have access to it)
https://studio.boardgamearena.com:8084/ ... badges.jpg

firgon wrote: ↑30 November 2023, 09:08 F12 is your friend!

Inspect your page html.

Is the div really here ?
What does the inspector say about CSS ?

When I write CSS directly within a <style> tag in the TPL file, it functions correctly. However, once I split the CSS into a separate file, I encounter an issue where the CSS no longer applies.

So you have your answer, your css file is wrong (its title, or its location, or... )