ansaurus

Question

CSS and HTML coding suggestion for a background image header

Answer 1

A:

A bit more information on the CSS would be good. In your "what you want" link there is an specified width -- there needs to be a wrapping element on the page (possibly your #wrapper division), then do something like:

background: url(/link/to/background/image.ext)

And you'll be set.

Kerry 2010-07-03 00:55:33

I'd like to know what was "wrong" with my answer so I can improve it?

Kerry 2010-07-03 01:05:45

"A bit more information on the CSS would be good" its not a good answer. If you can help with the code will be nice. As i said i dont know about css.

DomingoSL 2010-07-03 01:41:21

No, but giving you the exact line of CSS **is** an answer, which I did. You didn't include the CSS in the two external links to the CSS, so I can't tell how the site is actually operated. If you give me an actual link or the CSS in those files, I can give you more specific CSS.

Kerry 2010-07-03 02:41:51

Answer 2

A:

You're going to like CSS after you get used to it. The section like this:

<p>&nbsp;</p> 
      <p><br /> 
      </p> 
      <center>&nbsp;</center>

can be completely replaced with a little padding-top or margin-top setting like this:

.wrapper { 
  padding-top: 25px;

To address your question, Kerry was on the mark. Set the background property, specifying the url similarly to as he advises to get your desired effect. You probably want to do this on your wrapper class. Algo asi:

  background-image: url('relative/path/toImage.png');
  background-repeat:no-repeat;
  background-position:center top;
}

See this for more. Enjoy!

Tahbaza 2010-07-03 02:47:15

Answer 3

+1 A:

Here is the basic html structure you have

<body>  
    <div id="wrapper">
        <div id="container">
            <p>content</p>
        </div>
    </div>
</body>

Here is the basic css you need to place your banner image:

    #wrapper { 
        width: 600px; /*  this is the width of your background image */
        background: url(/path/to/image.jpg); /*  this sets the div background as an image */
        margin: 0px auto; /* this centers the div */
        padding-top: 20px; /* this "pads" the div 20px on the top */
    }
    #container { 
        width: 400px;  /* this sets the width of the container, it is narrower than the wrapper div to get the effect you are looking for */
        margin: 0px auto; /* to center the div with the div#wrapper  */
    }

superUntitled 2010-07-03 03:31:26

Answer 4

A:

Others have answered your question, but I'd like to add that there are a couple things I'd do to improve your HTML code.

Move the Javascript tag which loads jQuery to the last line before . The current position will block rendering until the script has loaded.

<script type="text/javascript" src="JS/jquery-1.3.2.js"></script>
<script type="text/javascript" src="JS/tabs.js"></script> </body>
Get rid of the , tags (and center your #wrapper as superUntitled proposes)

Good luck!

mariachimike 2010-07-03 04:55:09

ansaurus

tags:

views:

answers:

CSS and HTML coding suggestion for a background image header

related questions