Concatenating the Razor Variables with CSS Styles

Question

I am trying to concatenate the Razor Variable (int) with a CSS Style so I can display the background image.

@{
    var positionY = 0; 
}

@foreach (var img in Model.Images)
{
    <div style="background-image: url('@Model.SpriteSheetUrl'); width: 60px; height: 60px;background-position: 0px @positionY px)> </div>



    positionY += 60; 

}

The problem I am facing is with the following line:

@positionY px

This produces 60 px (Notice the space between 60 and px) That space is causing the issue. How can I eliminate that space so it reads 60px instead of 60 px.

Matthew Jones · Accepted Answer · 2015-02-10 16:14:42Z

11

Try this:

<div style="background-image: url('@Model.SpriteSheetUrl'); width: 60px; height: 60px;background-position: 0px @(positionY + "px"))> </div>

The @() renders whatever is written inside of it as a literal, so you should get "60px" as the output.

answered Feb 10, 2015 at 16:14

Matthew Jones

26.3k17 gold badges106 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

john doe Over a year ago

Thank you very much! I will accept your answer in few minutes when StackOverFlow allows me :) Thanks again!

Jens Mander Over a year ago

Are you sure you mean "literal"? positionY is not a literal but a variable.

Charlie B · Accepted Answer · 2023-08-02 08:03:59Z

0

Another scenario where the model property is only part of the url and must be preceded by an extension. The escape character must be used to concatenate the extension.

edited Aug 2, 2023 at 8:03

answered Aug 2, 2023 at 7:58

Charlie B

111 bronze badge

Collectives™ on Stack Overflow

Concatenating the Razor Variables with CSS Styles

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related