Tema: Poner header que ocupe todo el ancho de la pantalla

Hola, he comprado un header y quiero ponerlo de tal forma que ocupe todo el ancho de la pantalla. Lo que quiero es que aun cambiando la resolución y el tamaño de la pantalla, el header se vea siempre entero hasta el final y no se corte ni se cree una barra de scroll abajo para desplazar la pantalla.

Me han dicho que se hace con el css pero no tengo ni idea y por más que miro algunos tutoriales no lo consigo hacer. Me echáis una mano?

Por cierto, mi blog esta alojado en Blogger. Estoy tocando cosas según voy viendo en Internet y lo único que hago es descolocar todo el blog

Para hacer eso debes usar el siguiente código css:

Código HTML:

background:url(Url-de-la-imagen)repeat-x 100%;

Puedes crear un div en CSS con un color semejante al del borde de la imagen, de forma que ocupe todo en ancho de pantalla disponible, manteniendo el header o centrado o hacia la izquierda.

Lo que pasa es que el header tiene un degradado de izquierda a derecha por lo que si pongo un color de fondo quedaría cortado.

thelarios, en que parte de la plantilla meto eso? Es que yo apenas se de html y estas cosas:

Esta es la parte del header que tengo en la plantilla:

Código:

#header-wrapper {
  position: relative;
  height: 185px;
  background: url(http://2.bp.blogspot.com/_A_BXOSXle0Y/THCzWsqZ9jI/AAAAAAAABCE/hvVYmeOthEY/s1600/bk_header.jpg) 0 51px no-repeat;
}

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin-top: 104px;
  position:absolute;
  left:0;
}

#header h1 {
  font-size: 48px;
  color: #333333;
}

#header a {
  color: #333333;
  text-decoration: none;
}

#header .description {
  color: #999999;
  display: block;
  font-size: 12px;
  margin-top: 6px;
  padding-left: 5px;
  padding-top: 5px;
}

#header img {
  margin-left: auto;
  margin-right: auto;
}

#header img{
  position: absolute;
  margin-top: -20px;
  left:0;
}

y esto:

Código:

<div id='header-wrapper'>
	
		<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Ubuntu &amp;amp; Software libre (cabecera)' type='Header'>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
<b:includable id='main'>

Acabo de colocar el header, ahora solo falta expandirlo. Voy a seguir intentandolo

No pensaste en poner el CSS con dimensiones relativas??

ej:
width: 100%;
height: auto;

o algo así...