background help.

**landysaccount** · 08-19-2010 11:30 AM

Hello:

I'm trying to learn CSS and I would like to know what I'm doing wrong on the following, I can't see the the gradient background at all. I'm including the file on the index.html. I can see the logo but, nothing after that. What's wrong?

Code:

#header{
  display: inline;
  background-color: #016ba5 ;
  width: 100%;
  margin: 0px;
  padding: 0px;

}

#logo {
    background: #fff url( '../images/owsfacturas.png' ) 0px no-repeat;
    width: 363px;
    height: 91px;
    float:  left;
    display: block;
}
#headgradient{
    background: #016ba5 url( '../images/headgradient.jpg' ) 0px no-repeat;
    width: 100px;
    height: 91px;

}

On index.html:

HTML Code:

<div id="container">
    
    <div id="header">
      <div id="logo"></div>
      <div id="headgradient"></div>
    </div>
  
  </div>

**aj_nsc** · 08-19-2010 11:34 AM

Unless you specified a width on #container, width: 100% on #header means nothing. You do not need to declare display: block on natively block level elements (e.g. div, h#, p, etc). Why would you have a header that is display: inline containing block level elements? This makes no sense.

Now, on to your question - the path to the background file needs to be relative to your css file directory, not to your HTML file. That's a common mistake that people make, could that be your problem? I think you might need to put something in your div's, like   rather than leave them empty.

**landysaccount** · 08-19-2010 11:39 AM

Thanks for your quick reply.

HTML Code:

#container{
  width: 100&#37;;

}

removed the display: block and inline and still can't solve it. the files are relative to the css file. I can see the logo ok but, nothing else.

**aj_nsc** · 08-19-2010 11:55 AM

Can you see any styling of your #headgradient div? If you put a border on it, can you see the border? What about the default background color?

EDIT: Wait wait....if this is most like CSS background gradients, you probably made a 1px wide image and plan on tiling it horizontally......is that the case? If it is, the no-repeat rule might be tripping you up.

**landysaccount** · 08-19-2010 12:15 PM

The image is actually 100x100. After putting a border I noticed the image is actually under the logo when viewed using Chrome. Now, when using IE is right next to the logo. What's wrong in Chrome??

**landysaccount** · 08-19-2010 12:19 PM

Also, If I put this: background-position: 363px 0; in the #headgradient I get exactly what I want but, only in Chrome, on IE it gets messed up.

**criterion9** · 08-19-2010 12:42 PM

Do you perhaps not have an appropriate DTD at the top of your file?

**aj_nsc** · 08-19-2010 12:42 PM

add clear: left; to #headgradient to get it to drop in IE - stupid IE.

If you're image is 100px x 100px then adding background-position: 363px 0; makes no sense. That would offset the background image in the div 363px to the right, at which point, with a no-repeat rule, there would be no image.

If you're fairly new to CSS, you might want to take a look at some of the w3cschools css tutorials -> http://www.w3schools.com/css/default.asp

**landysaccount** · 08-19-2010 12:52 PM

I've read that. That's where I'm getting help from.

the clear: left; just didn't work and added a the #headgradient on the next line. What would be the appropriate DTD for a simple html, css, js, php file?

**aj_nsc** · 08-19-2010 01:04 PM

<!doctype html>

**landysaccount** · 08-19-2010 01:05 PM

I added margin-left: 360px; to #headgradient and that helped...
Thanks.

**landysaccount** · 08-19-2010 01:06 PM

This is what's on my file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I use pspad.

**aj_nsc** · 08-19-2010 01:19 PM

Thats doctype is fine enough to use. <!doctype html> is the doctype for HTML5 and is backwards compatible, which is why I am starting to use it - just to get into the habit of it although you really won't be able to use HTML5 features across all browsers in production sites for quite some time.

Thread: background help.

Thread Tools

Display

background help.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions