HTML/CSS - What am I doing wrong

main.css
Code: 
body {

  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  margin:0px;
  padding: 25px;
}

.header {

  background: url('../images/top_nav_bg.png') top right no-repeat;
}

index.html
Code: 
<HTML>

 <HEAD>
 
  <TITLE>DESIGN - Testing</TITLE>
  
  <link rel="stylesheet" href="styles/main.css" />

 </HEAD>

<BODY>

  <div class="header"> 

  </div>

Blah Blah

</BODY>

</HTML>
 
billysielu said:
You need quotes.

e.g.

background: url(../images/test.png) top right no-repeat;

becomes

background: url('../images/test.png') top right no-repeat;
Click to expand...

Sorry, this is simply not true (to clarify - bad practices aside or whatever it's not a technical requirement)

To make that last example work Neodite all you should need to do is put some content in your div - like some text.

It's also going to benifit you in the long run to set a doc type in your HTML.

Put this at the top of the file.
<!DOCTYPE html>
 
Last edited:
It is true.

However, the reason why it's not working is because there's no width and height on the div.

Add this to .header


border:1px solid red;

width:200px;
height:200px;
 
Ah, so I can now see a very small amount of the image.

What is the best way to get it at the very top of the page and to repeat all the way across (with it's correct length too)

it's aa 14 x 85 px image
 
background: url('../images/top_nav_bg.png') top left repeat-x;

EDIT:
The defaults applied with:

background: url('../images/top_nav_bg.png');

should be the same as that above example actually.

EDIT2: Actually no, the default will repeat in both the X and Y directions. Which might be what you want... If not you can specify repeat-x for horizontal or repeat-y for vertical repetition.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom