Wednesday, January 28, 2015

CSS: Background and repeat

I was playing around with displaying an image via img src in HTML and background in CSS. I did this:
      #image_id{
width: 45px;
height: 45px;
background:     url(/*insert location of image here*/);
}

The result was the image displayed two times and appeared to be trying to display a third time, except that it was partially blocked by another image. I didn't have this problem using img src in HTML. Why?

Because background causes the image to repeat. The solution is to add:
        background-repeat: no-repeat;

There is also the option of having the image repeat on the x-axis or y-axis only.

I make no representation as to the validity or desirability of using background instead of img src. I do, however, hope to save someone a little time when they start going batty trying to figure out where in their code they made the image appear twice when they use background. Happy cascading!



No comments:

Post a Comment