Tengo una plantilla de sitio web con varias páginas, una página acerca de, página de contacto, etc.

Hay una etiqueta de identificación #subheader asignada al contenedor para la imagen en la parte superior de cada página. Por lo tanto, se distribuye entre todas las páginas. Quería cambiar la foto de cada página, así que copié y pegué el CSS para la etiqueta #id y cambié la etiqueta ligeramente para cada una. Y esperaba simplemente cambiar la url de cada una, y cambiar el nombre de la etiqueta para poder cambiar el html en consecuencia.

El problema es que las etiquetas de identificación posteriores siempre arruinan la imagen. Lanza toda la estructura fuera de control. Pero la foto funciona bien cuando asigno la URL a la clase original.

¿Que me estoy perdiendo aqui

  #subheader {
  padding-bottom: 70px;
  background: #222;
  background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Services.jpg)top fixed;
  background-size: cover;
    background-repeat: no-repeat;

    }

    #subheader2 {
  padding-bottom: 70px;
  background: #222;
  background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Architect.jpg)top fixed;
  background-size: cover;
    background-repeat: no-repeat;
}

#subheader3 {
  padding-bottom: 70px;
  background: #222;
  background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Architect.jpg)top fixed;
  background-size: cover;
    background-repeat: no-repeat;
}

#subheader2: Original#subheader:

Aquí está el CSS completo para la etiqueta #subheader.

    /* subheader */
#subheader {
  padding-bottom: 70px;
  background: #222;
  background: url(file:///Users/Nineborn/Desktop/New%20LW%20Construction%20Site/Services.jpg)top fixed;
  background-size: cover;
    background-repeat: no-repeat;

}

#subheader h1 {
  color: #eceff3;
  text-align: center;
  margin-top: 40px;
  font-size: 32px;
  font-weight: 00;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 2px 2px 2px black;
}
#subheader span {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 15px;
  margin-top: 88px;
  color: #fff;
}
#subheader .subdetail {
  font-size: 11px;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 10px;
  text-transform: uppercase;
  color: #777;
  padding-left:0px !important;
}
#subheader .subdetail li {
  display: inline-block;
  color: #fff;
  margin:0;
  text-shadow: 2px 2px 6px black;
  font-weight: 700;
}
#subheader .subdetail li a {
  color: #ff6600;
}
#subheader .subdetail li.sep {
  margin-right: 20px;
}
/* subheader end */