CSS - position background image when set with background color

HTML & CSS
1

Hi all

I have a code pen here - https://codepen.io/mt-ttmt/pen/yjKPZZ

I can set the background color of an element and set a background image

Is it posssible to set the size and position of the backgorund image and not effect the background color.

.content{
  background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1' viewBox='0 0 10 6'%3E%3Cpath d='M1.7.3A1 1 0 1 0 .3 1.7l4 4a1 1 0 0 0 1.4 0l4-4A1 1 0 1 0 8.3.3L5 3.58 1.7.29z' fill='red'/%3E%3C/svg%3E"),linear-gradient(to bottom, white, #999);
  background-repeat: no-repeat;

  /* This effects the background color as well*/

  /*  background-size: 20px;
      background-position: 2px 5px; 
  */

  height: 50px;
  width: 200px;
  border: 1px solid grey;
}
2

Hi there RachelR,

experiment with these values…

    background-size: 40px auto, 100%  auto;
    background-position: center center,  0 0;

coothead

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.