固定ポジションコンテナの上にイメージを追加するにはどうすればいいですか？

Question

私は（スティッキー）私のWebページの下部に、次の形の通知バーを作成したいと思います。ここで

私のHTMLは

<div class="notice-container"> 
     <div class="wave"></div> 
     <div> 
     <p>Content here</p> 
     </div> 
    </div> 

されており、ここで私のCSSで、私はいくつかのことを試してみましたが、ここでは最新です：

 .notice-container { 
      display: block; 
      height: auto; 
      background-color: #ccc; 
      position: fixed; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      width: 100%; 
     } 
     .wave:after { 
      content: ""; 
      background-image: url('../wave.png'); 
      background-repeat: repeat-x; 
      position: absolute; 
      top: 0; 
      margin: -30px; 
      width: 100%; 
      height: auto; 
     } 

コンテナが位置しているので、 ：固定されている、どのように私は波の上でリピートx仕事を得ることができますか？コンテナdivの上に背景イメージを表示したいと思います。

Answer 1

を設定する必要があなたの擬似要素はdisplay: block;とも指定height属性を必要とします。値autoだけで、その内容に合わせて拡張し、それを言うだろう（と、それは何を持っていない）ので、その後、height値が0残ります。

.wave:after { 
    content: ""; 
    display: block; /* <- Add this */ 
    background-image: url('../wave.png'); 
    background-repeat: repeat-x; 
    position: absolute; 
    top: 0; 
    margin: -30px; 
    width: 100%; 
    height: 60px; /* Or whatever your wave.png requires */ 
} 

Answer 2

置き、あなたのURLと正義background-sizeで画像の大きさ。また、また、擬似要素の必要な高さを変更することを忘れないでくださいmargin-topとtop

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    height: 70px; 
 
    border: 5px solid red; 
 
    border-top: 0; 
 
    margin-top: 20px; 
 
    position: relative; 
 
} 
 
footer:after { 
 
    width: 100%; 
 
    display: block; 
 
    content: ''; 
 
    height: 20px; 
 
    position: absolute; 
 
    left: 0; 
 
    top:-20px; 
 
    background-image: url(https://i.stack.imgur.com/z4HMY.png); 
 
    background-size: 10% 20px; 
 
}

<footer></footer>