Newbie Question:

 

I was reading a tutorial on making header for a website - basically a long gradient-filled rectangle with rounded corners. The coding involved using a 1px strip from the middle repeated for the width of the header with a separate image for the left and right sides to complete the rectangle (all taken from photoshop). A logo was then positioned over the top.

 

Problem is I can't find this tutorial and I'm having trouble finding something similar without load of other stuff going on. Does anyone have a useful link for this type of thing, or even better provide a sample of the kind of code you would use for this (html and css)?

 

Thanks for your patience

Please help this is driving me nuts! Should the image links be in the html or the css? I've managed to get the middle 1px image to repeat across the top of the page using background-image and background-repeat: repeat-x, but I don't think this is what i need to do to create the rest of the image.

 

Like this header for example:

 

http://tutorialblog.org/smoothheader/headertutfinal.png (just the background grey box is what I'm after - and centered).

No-one knows how to do this?

have a look at http://redmelon.net/tstme/4corners/ not sure if this is exactly what you are looking to do

Look like this is what I was looking for:

 

<style type="text/css">
  #container { width: 900px; margin: auto; }
  #header_left {float:left; background:url('header_left.jpg') no-repeat; /*location of the left part of the header*/ width: 5px /*example*/; height:200px /*example*/ }
  #header_center {float: left; background:url('header_center.jpg') repeat-x; /*location of the left part of the header; width: 890px; height: 200px; }
  #header_right {float:left; background:url('header_right.jpg') no-repeat;  width: 5px /*example*/; height:200px /*example*/ }
</style>


<div id="container">
  <span id="header_left"></span>
  <span id="header_center"></span>
  <span id="header_right"></span>
</div>

Edited January 28, 201016 yr by Sam G
added [code] tags