Member Avatar for jen.evans1

Hi everyone

can you please look at this site's source codes (html and css) and tell me why my images aren't showing in any browsers. They show up in my design part on Dreamweaver.

thanks!

  • 5 Contributors
  • 4 Replies
  • 114 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by bestwsd

Dani AI

Generated

Common reasons a background image appears in Dreamweaver but not on the live page are path resolution, missing files on the server, case mismatches, or the stylesheet not being read by the browser. The replies from and are on the right track: whether you use ../ depends on where the CSS file sits, and an external .css file must contain only CSS (no stray <style> tags).

Checklist to diagnose and fix (do these in order):

  1. Use DevTools (Console + Network) and reload the page. Look for 404/403 on the image request or CSS parse errors. That will show the exact URL the browser tried to fetch.
  2. Paste that image URL into the browser address bar — if it 404s, the file isn’t where the CSS expects it. Check exact filename and extension (including case: Image.JPG ≠ image.jpg on most servers).
  3. Confirm how paths resolve: URLs in CSS are resolved relative to the stylesheet file, not the HTML file — move up or down folders only as appropriate for the stylesheet location (this is why ../ is sometimes needed). See MDN for how url() is resolved: background-image (MDN).
  4. Verify the stylesheet is actually loading (Network tab) and that there are no stray HTML tags or syntax errors in the CSS that would stop later rules from applying (as @johny_mplayer warned).
  5. Check server/upload issues: confirm the images were uploaded to the correct folder, file permissions allow read access, and there’s no .htaccess blocking access.

Quick tips: clear browser cache or disable caching in DevTools while debugging; for full-screen backgrounds prefer background-size: cover; rather than a fixed pixel size; avoid relying on Dreamweaver’s local preview because it can mask server-side path and case-sensitivity differences.

Recommended Answers

All 4 Replies

Member Avatar for Member #949455

Images wont show up in background

Instead of this:

background-image:url(assignments/images/backgroundpng.png);

Try this:

background:url(../assignments/images/backgroundpng.png);

Edited by Member #949455 because: grammer
Member Avatar for johny_mplayer

Hello jen.evans1
I think your mistake is that your pictures aren't in the right folders.
For example you put a background image in the #container div like this:
background: url("assignments/images/websitebackground1.jpg") repeat scroll 0 0 transparent;
but the image doesn't exist in the folder if you follow the path:

So in your server the css file is portfoliocss.css and it is not in a folder so you do not need to put in front of assignments the dots: ../assignments/images/websitebackground1.jpg
But what you need is to look if the folder assignments exists and inside the assignments folder if folder images exists with the photo websitebackground1.jpg.

And delete from the portfolio.css the line 4: <style type="text/css">

I hope it is helpful.

Edited by johny_mplayer because: mistake in the posted link
Member Avatar for JorgeM

We basically need to know which folder the pictures are loaded and where that folder is in relation to the web site root folder.

Member Avatar for bestwsd 
Try this code 

body {
    background-color:#8f928b;
    background-image: url(../assignments/images/websitebackground.jpg);
    background-repeat:no-repeat;
    background-attachment: scroll;
    background-size:1024px;
    background-position:center;
    width:100%;
    height:100%;}
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.