Member Avatar for Epi23

Ok, this is confusing me to no end, I am making a site and am trying to get the background image to stay in the center, not repeating. I've done this countless times by linking to an internet URL, but not from off of my own hdd.

The code I got to work is:

<html>

<head>
<title>title here</title>
</head>

<body background=assets\back.jpg>

but it repeats it, I don't want it too.

but, when I use CSS, it just shows a blank page.

My CSS code (I just used it in the head tag) is:

<head>
<title>title here</title>
<style>
body { background: url(assets\back.jpg) #fff center no-repeat fixed;}
</style>
</head>

I have no idea what I'm doing wrong.

Any help will be greatly appreciated

  • 2 Contributors
  • 2 Replies
  • 130 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Epi23

Dani AI

Generated

As found, the image worked with the deprecated HTML background attribute but not when declared in CSS, and was right to point at folder layout. The two common pitfalls that cause this behavior are (1) incorrect relative paths and (2) using Windows-style backslashes. CSS URL resolution depends on where the CSS lives: a URL in an external style.css is resolved relative to that CSS file; a URL in a <style> block is resolved relative to the HTML document. Backslashes (\) are file-system separators on Windows, not URL separators — use forward slashes (/) or the browser will treat the backslash as an escape and the rule can fail.

Quick troubleshooting checklist:

  • Inspect the Network panel (DevTools) to see whether the image request returns 200 or 404; that pinpoints a wrong path or case mismatch.
  • If the site is opened via file://, try serving it with a light local server (for example, python -m http.server) to avoid protocol-related quirks.
  • Ensure names and casing match (servers can be case-sensitive).
  • Clear cache or hard-refresh after changes.

Example CSS pattern (adjust the relative path based on where the CSS file sits):

/* if css is /css/style.css and image is /assets/back.jpg */
body {
  background: #fff url("../assets/back.jpg") center center no-repeat fixed;
  background-size: cover;
}

Avoid the HTML background attribute (deprecated). For definitive behavior and syntax details, see MDN on background-image and background-size.

Recommended Answers

All 2 Replies

Member Avatar for ko ko

Check url of the file. Are 'assests' folder and the 'css' file same root? You can also write inline-style. Like:

<body style="background: url('assets\back.jpg') no-repeat top center;">

But external style-sheet was strongly controlled of the layout of your site with one file. The best way is placing the 'css' file and images in the same root.

Member Avatar for Epi23

Yep, I got it to work now. I put it in the same root, and now it works. I wrote out the code again, and now it works. I have no idea what it was I did wrong, but nonetheless it works now. Thanks for the help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.