HTML/CSSで画像の区切りに苦労しています

Question

私は基本的なウェブサイトを作成しています。私は自分のウェブページの2つのセクションの間に水平の区切りイメージを使用したい。今は現れていません。これは私が使用しているHTMLです：

<hr class="separator"> 
<div class="separator"></div> 

これは私のCSSです：

hr.largeseparator { 
    border: 0; 
    height: 20px; 
    background-image: url("divider2.png"); 
    } 

largeseparator { 
    border: 0; 
    height: 20px; 
    background-image: url("divider2.png"); 
} 

ファイルは私のHTMLファイルと同じフォルダにあります。

hr.largeseparator { 
 
    border: 0; 
 
    height: 20px; 
 
    background: url("divider2.png"); 
 
}

<h2> Lorem ipsum dolor </h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut viverra 
 
    dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p> 
 
</div> 
 
<hr class="largeseparator"> 
 
<div id="Text2"> 
 
    <h2> Lorem ipsum dolor </h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut 
 
    viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>

Answer 1

そこにあなたのCSSと間違って何もありませんが、あなたがbackground-sizeを必要とし、最終的にbackground-repeat

hr.largeseparator { 
 
    border: 0; 
 
    height: 20px; 
 
    background: url("http://www.fblakeside.net/hp_wordpress/wp-content/uploads/2015/04/divider-1024x119.png") center; 
 
    background-size: auto 100% 
 
} 
 

 
hr.no-repeat { 
 
    background-repeat: no-repeat 
 
}

<div> 
 
    <h2> Lorem ipsum dolor </h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut 
 
    viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p> 
 
</div> 
 
<hr class="largeseparator" /> 
 
<div id="Text2"> 
 
    <h2> No repeat separator </h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut 
 
    viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p> 
 
    <hr class="largeseparator no-repeat" />

がリセットされる場合があります画像へのパスは、CSSファイルをスタンドパスから考えるべきです。

あなたのCSSは、あなたのCSSを支えるフォルダ内にdivider.pngを探します。

あなたのサイトがそれを使用している場合は、urlrewritingも気にする必要があります。

Answer 2

をあなたのイメージのソースを検証期待どおりに動作します。..

hr.largeseparator { 
 
    border: 0; 
 
    height: 20px; 
 
    background: url("http://placehold.it/350x150"); 
 
}

<h2> Lorem ipsum dolor </h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut viverra 
 
    dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p> 
 
</div> 
 
<hr class="largeseparator"> 
 
<div id="Text2"> 
 
    <h2> Lorem ipsum dolor </h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut 
 
    viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>

を：ここで

は、私が使用している実際のHTMLです