How to mix multiple background with LESS

css, less

Solution

It is challenging in LESS to pass multiple property values to a single property. YOur current code obviously works well for single backgrounds. To get multiple, you have to usually work with strings.

The following allows multiple urls to be input by passing them as a single string to the first parameter, and then uses inline javascript to do a replacement on the string and concatenate those urls to the other parameters.

LESS

.background_centered(
  @urls,   
  @position_horizontal: center,
  @position_vertical: top,
  @background-repeat: no-repeat,
  @transparency: transparent ) {

  @combinedValues: ~"@{position_horizontal} @{position_vertical} @{background-repeat} @{transparency}";
  @urlsRewrite: ~`@{urls}.replace(/\)/g, ') @{combinedValues}')`;
  background: @urlsRewrite;
}

.class {
   .background_centered("url('../img/war_top_baner_gp.png'), url('../img/war_header_bg.png')");
}

Output

.class {
  background: url('../img/war_top_baner_gp.png') center top no-repeat transparent, url('../img/war_header_bg.png') center top no-repeat transparent;
}

Problem

I have a small question... Is there any option to mix multiple background with LESS? I have this setup for background in LESS: ``` .background_centered( @url, @position_horizontal: center, @position_vertical: top, @background-repeat: no-repeat, @transparency: transparent) { background: @arguments; } ``` now: i need to write in out put style with multiple background, so i do this: ``` .class { .background_centered(url('../img/war_top_baner_gp.png'),url('../img/war_header_bg.png')); } ``` something is not right bc in final output i have this: ``` background: url('/../img/war_top_baner_gp.png') url('/../img/war_header_bg.png') top no-repeat transparent; ``` what is wrong? Whether or not it is possible to do so?

Original source