HTML/CSS wiederholenden + image-header

Bekam ich einen header zu arbeiten, aber in sehr hässlicher Weise, kann mir bitte jemand sagen, der schöne Weg, dies zu tun?

Möchte ich eine unendliche header mit einem Bild in der Mitte. So brauche ich, um einen sich wiederholenden hintergrund-Bild, dann legen Sie mein Bild, und dann weiter, das unendliche Bild. Ich habe auch noch zu tun der unendlichen Linie unter dem Bild. Hier ist meine Arbeit, aber hässlich HTML-code:

<h1>
    <div align="center">
        <img src="designs/header12.png" align="center"/>
    </div>
</h1>

<br/><br/><br/><br/><br/><br/><br/><br/><br/>

<h2></h2>

Hatte ich, um eine Reihe von <br/> in der Lage, die h2 in der richtigen position. Dies ist, wie h1 und h2 wie in der CSS:

h1 {
    background:url('../designs/headerPiece.png');
    height: 33px;
    width:100%;
    float:left;
}
h2 {
    background:url('../designs/headerPiece.png');
    height: 33px;
    width:100%;
}

Jede Hilfe dankbar!

InformationsquelleAutor luqita | 2011-01-02

  1. 1

    In der Regel gebe ich das Bild als hintergrund zu einer h1, auf diese Weise können Sie darauf schreiben und das ist mehr SEO-freundlich. In diesem Fall müssen Sie geben die Maße der h1 der hintergrund (Eigenschaften width und height).

    HTML:

    <div id="page">
  <h1 id="header"> </h1>
</div>

    CSS:

    #page {
  background: url('../designs/headerPiece.png') top left repeat-x;
}

#page h1 { 
 background: url('designs/header12.png') top left no-repeat;
 margin: 0px auto;
 width: width-of-the-header;
 height: 33px;
}

    InformationsquelleAutor Zoltan Lengyel

  2. 0

    Sollte dies funktionieren:

    <div class="background"></div>
<h1><img src="designs/header12.png" align="center"></h1>
<div class="background"></div>

    CSS:

    .background {
    background: transparent url('../designs/headerPiece.png') top left repeat-x;
    height: 33px;
    width: 100%;
}

h1 {
    text-align: center;
    margin: 0;
    padding: 0;
}
    Ich danke Ihnen sehr, aber mir fehlt das untere Stück in deinem code... ich brauche noch ein repeat-x background-image auf der Unterseite des headers, und das ist, was ich nicht weiß, wie man richtig.
    Ich habe bearbeitet die Antwort unter Berücksichtigung der zweiten überschrift. Allerdings, wenn Sie sind wirklich das gleiche Bild headerPiece.png können Sie die Höhe 66px, dann Ersetze repeat-x wiederholen und Sie würden nicht brauchen, h2. Wenn Sie eine live-version, bitte teilen.
    Leider habe ich nicht eine live-version... Das problem ist, dass Sie nicht zusammen sein... Es muss so Aussehen: |o| (Drehung um 90 Grad). Die " o " wäre header12.png und die '|' headerPiece.png... Danke für den Versuch, zu verstehen 🙂
    Diese neue version könnte funktionieren und ist einfach.

    InformationsquelleAutor methodofaction

Schreibe einen Kommentar