CSS Background url inside Div not showing up

Question

My first question so please go easy. I've been stumped on this for a day now and can't work out what the issue is. Essentially I have a div with an ID that i'm adding a background url too..image1 inside the main div. Essentially it's an image that swaps when I hover. I've gone right back to basics and tried this code in a fresh document and it works perfectly. However when I paste the same code in the file i'm trying to work on the image doesn't display. No idea what would be stopping it?

The div id is working. I styled an empty red box to test it out.
The path is correct. I even went as far as to paste the image into my root for the sake of simplicity. Still nothing.

Any help would be appreciated.

html:

<div id="main">

 <h1> <!--  something something about us -->  </h1>

<p>The Custom House clock struck one. Mr. Fogg observed that his    watch was two hours too fast.

Two hours! Admitting that he was at this moment taking an express train, he could reach London and the Reform Club by a quarter before nine, p.m. His forehead slightly wrinkled.</p>


<div id="image1"> </div> <!-- This is the part i'm having trouble with-->

CSS (including all css for #main):

#main h1 {
        text-align: center;
        padding: 30px 0 0 0;
        color: #4b4b4c;
        }


#main {height: 685px;}


#main p {
        padding: 20px 50px 0 50px;
        width: 60%;
        margin: 0 auto;
        text-align: center;
        font-size: 15px;
        color: #868686;
            }


/* rollover css images */

#image1 {
    background: url(contextmap.jpg) no-repeat;
    width: 400px;
    height: 400px;
            }

I haven't added the hover yet because I can't even get the initial image to display, yet everything worked fine in my sample using only this code.

If there's anything i've left out please let me know. Like I said this is my first time posing a question. Thankyou.

Is your image in the same directory as your css? If not you may need to go up a level. url(../images/contextmap,jpg) — Josh Sanger
– Josh Sanger, Commented Nov 23, 2015 at 1:09

iliketolearn · Accepted Answer · 2015-11-23 01:15:43Z

1

You may need to change the file path in your css.

Instead of: url(contextmap.jpg)

Try: url(../images/contextmap.jpg)

Images can be replaced for the name of the folder where the jpg is stored.

answered Nov 23, 2015 at 1:15

iliketolearn

7103 gold badges9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mouradif · Accepted Answer · 2015-11-23 01:38:58Z

1

The URLS in the css are relative to the CSS file, not the HTML file that links it. this should work if you have the image and the CSS in the same folder (or in case of CSS inside a style tag in your HTML file, same folder as your HTML file).

answered Nov 23, 2015 at 1:38

Mouradif

2,7342 gold badges26 silver badges40 bronze badges

2 Comments

Gerald 7D Over a year ago

Thanks for your elaboration. Helped clarify my issue further.

Mouradif Over a year ago

Sure no problem, I didn't understand why everyone would tell you to add "../images/" before your image name as you gave no clue about your folder structure...

Collectives™ on Stack Overflow

CSS Background url inside Div not showing up

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related