CSS is not working same as in CSS file as in HTML

Question

When I put this code in my html file, it is working without issue:

  <style type="text/css" media="screen">
    #headerimg 
    {
      display: block;
      background-image: url('/Content/images/epp/ebweblogo1.gif');
      background-repeat: no-repeat;
      background-position: center center;
            width:100%;
      height:100%;   
        margin: 0;
  padding: 0;
    }
  </style>

but when I move it to my css file as this:

#headerimg 
    {
      display: block;
      background-image: url('/Content/images/epp/ebweblogo1.gif');
      background-repeat: no-repeat;
      background-position: center center;
            width:100%;
      height:100%;   
        margin: 0;
  padding: 0;
    }

This is my html:

</head>
  <body>

    <div class="page">

      <div id="header">
      <div id="headerimg" />

I am assuming it's due to the image location but I'm not sure since I've tried variations of the path and never got it to work.

Any suggestions?

EDIT

Sorry, you can't read my mind, I know.

When I place the css in the html file, the image displays fine. When I move it to the css file (site.css) it is not displaying at all. I've tried several different paths and it isn't being displayed no matter what I put in there.

UPDATE #2

When I change my html to this:

<div class="page">

  <div id="header">
    <div id="headerimg">test</div>

I am getting the image behind the text as 1 line that says test but not the full size of the image.

So it is apparently not displaying the image due to the size of the div? I changed the css to this:

height:130px;

but that did not change the height at all.

Are you aware that the leading slash before Content makes a reference to the site root? — JamesHoux
– JamesHoux, Commented Dec 26, 2012 at 9:50
I dont get your question properly. Is the entire css not applied when moved to a file or is it only the image? — Shiridish
– Shiridish, Commented Dec 26, 2012 at 9:52

Oded · Accepted Answer · 2012-12-26 10:05:05Z

5

The two bits of CSS are not equivalent.

In one, you have #headerimg (id selector) which is a very different selector to .headerimg (class selector).

#imgplacement is also missing from the second sample.

As for the image issue - you need to ensure the correct path to the image directory.

This will be relative to where the CSS is - if in a CSS file, the image needs to be relative to the CSS file. If it is embedded in the HTML, it needs to be relative to the HTML file.

Since the path is rooted (starts with /), it should work everywhere. Use the developer tools to determine where it is looking for the image.

edited Dec 26, 2012 at 10:05

answered Dec 26, 2012 at 9:50

Oded

501k102 gold badges900 silver badges1k bronze badges

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

5 Comments

ErocM Over a year ago

I fixed that, I was testing and forgot to change it back. Also, imageplacement isn't used, it was another test. Sorry, I cleaned it up.

Oded Over a year ago

@ErocM - So, what's the actual problem you are having? What's the directory structure like (location of HTML, CSS and image are all needed). Do you understand absolute and relative paths?

ErocM Over a year ago

Yes I do. I can use the css in the html file and it shows without issue, when I move it to the css file, the image is not showing at all. I've tried various paths and I cannot get the image to show.

Oded Over a year ago

@ErocM - Did you do a hard refresh (Ctrl + F5)?

Sonhja Over a year ago

You should include it like this: <link rel="stylesheet" type="text/css" href="yourstyle.css" media="all" /> And then be careful on where your image is located.

Sonhja · Accepted Answer · 2012-12-26 10:09:20Z

0

Include your css like this on the home page:

<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />

And then be careful on routes for your image.

answered Dec 26, 2012 at 10:09

Sonhja

8,51022 gold badges79 silver badges138 bronze badges

Comments

Amyth · Accepted Answer · 2012-12-26 10:15:27Z

0

include the CSS file between the <head></head> section of your HTML like this:

<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />

answered Dec 26, 2012 at 10:15

Amyth

33k28 gold badges97 silver badges137 bronze badges

1 Comment

ErocM Over a year ago

I have this and the css is being used, thanks for the help though.

Collectives™ on Stack Overflow

CSS is not working same as in CSS file as in HTML

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related