CODEWITHSUNDEEP
htmlcss
user11545408
user11545408

Reputation:

Repeating shape as a background-image

I created a .png file that I want to use as a background-image to repeat across the screen as a separator between sections.

I've tried using img, background-img, added it to a new (div). tried using (CSS} adding the img url with repeat-x. nothing seems to work.

/* with CSS 3 */
    <div class="divider">
      <img src="../../../assets/bgimg.png" height="80" alt="">
      </div>

/* with CSS 3 */
     .divider{
      background-repeat: repeat-x;
       background: url(http://localhost:4200/assets/bgimg.png);

}

This is my latest attempt

No error messages, the img appears but does not repeat.

Upvotes: 0

Views: 295

Answers (1)

Angel Garcia
Angel Garcia

Reputation: 1577

So, it appears that you might need to add width and height to your divider. Plus you need to set the size of the image using css. I don't know exactly how you want it, but here's a Codepen link that has the code and might have the result you're looking for. 

.divider{
  height: 100px;
  width: 100%;
  background-image: url(http://lh3.googleusercontent.com/dB3Dvgf3VIglusoGJAfpNUAANhTXW8K9mvIsiIPkhJUAbAKGKJcEMPTf0mkSexzLM5o=w300);
  background-repeat: repeat-x;
  background-size: contain;
}

https://codepen.io/anon/pen/PvQaWX

Upvotes: 3

Related Questions