Space between two background images

Question

I'm working on wordpress for the first time. And I'm trying to add background images to the title. The title should look like this.

Till now I'm able to achieve till this level.

I want to have space between two images, how to do that? My CSS is

.page-id-157 .widget-title{
height: 45px;
padding-left:70px;

    background-image: url('images/stripe_red_diagonal.png'),url('images/logo_outline_black.png');
    background-repeat: no-repeat;
     background-position:20px 10px;
    }

How to give space between two background images? any help would be appreciated.

Answer 1

You need to modify the background-position value for the 2nd image separated by a ,

150px is the horizontal offset from the start point of the images and should be greater than the size of the first image.

.widget-title {
  height: 45px;
  padding-left: 70px;
  background-image: url('http://placehold.it/100x100'), url('http://placehold.it/100x100/333');
  background-repeat: no-repeat;
  background-position: 20px 10px, 150px 10px;
}

<div class="widget-title"></div>