After updating the External SS, the background vanishes

Question

There appears to be an issue with a page that I designed.

I originally wrote the CSS code internally within the

<style type="text/css>...</style>

section, including a background image, and all was working fine initially.

However, after transferring the CSS code from internal to external by adding

<link rel="stylesheet" type="text/css" href="main.css"/>

and creating a separate main.css file, I encountered unexpected behavior in Chrome v.29 and Firefox v.23:

My background image and images assigned to boxes on the page disappeared suddenly!

As a result, my page ended up displaying only text and buttons...

Below is part of the HTML code:


    <!-- HTML CODE HERE -->

And here is a snippet of the corresponding CSS:


    /* CSS CODE HERE */

Answer 1

Answer №1

Make sure your image folder path in the CSS file is up to date and matches the CSS file path

Consider using this approach

 #pageBody {
    background: url('../img/pageBg.png') no-repeat;
    .
    .
 }

Alternatively, you can keep the CSS file next to the HTML file instead of creating a new folder for it

Answer 2

Make sure your image folder path in the CSS file is up to date and matches the CSS file path

Consider using this approach

 #pageBody {
    background: url('../img/pageBg.png') no-repeat;
    .
    .
 }

Alternatively, you can keep the CSS file next to the HTML file instead of creating a new folder for it