css bind with html value

See more:

ASP.NET

Javascript

CSS

HTML

jQuery

i follow this tutorial: http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/

everything work fine until i want to change the cover, they using this code assign the cover photo if it's first page.

HTML

<script id="pageTmpl" type="text/x-jquery-tmpl">           
   		<div class="${theClass}" style="${theStyle}"   runat="server" id="divContent">
   			<div class="front">
   				<div class="outer">
   					<div class="removed" style="${theContentStyleFront}">
   						<div class="inner">{{html theContentFront}}</div>
   					</div>
   				</div>
   			</div>
   			<div class="back">
   				<div class="outer">
   					<div class="removed" style="${theContentStyleBack}">
   						<div class="inner">{{html theContentBack}}</div>
   					</div>
   				</div>
   			</div>
   		</div>
   	</script>

Javascript

for( var i = 0; i <= this.pagesCount - 2; ++i ) {
                  var $page       = this.$pages.eq( i ),
                      pageData    = {
                          theClass                : 'page',
                          theContentFront         : $page.html(),
                          theContentBack          : ( i !== this.pagesCount ) ? this.$pages.eq( i + 1 ).html() : '',
                          theStyle                : 'z-index: ' + ( this.pagesCount - i ) + ';left: ' + ( this.windowProp.width / 2 ) + 'px;',
                          theContentStyleFront    : 'width:' + this.windowProp.width + 'px;',
                          theContentStyleBack     : 'width:' + this.windowProp.width + 'px;'
                      };
                  if( i === 0 ) {
                      pageData.theClass += ' cover';
                  }
                  else {
                      pageData.theContentStyleFront += 'left:-' + ( this.windowProp.width / 2 ) + 'px';
                      if( i === this.pagesCount - 2 ) {
                          pageData.theClass += ' cover-back';
                      }
                  }
                  $( '#pageTmpl' ).tmpl( pageData ).appendTo( this.$el );
              }

CSS

.page.cover .front .content {
        background: #ddd url(http://txm.com.au/wp-content/uploads/2013/10/TXM_Image_3.jpg) no-repeat center center;       
        background-size: cover;
            }

now i have 2 different aspx with 2 different cover pages, hence the code above is not working for me. i don't wan to create another js or css file just because i want the different cover photo. so i was thinking, is there any possible that i set the css value with html control. eg:

.page.cover .front .content {
               background: #ddd url(" + lbl1.Text + ") no-repeat center center;
               background-size: cover;
           }

   <asp:Label Text="http://txm.com.au/wp-content/uploads/2013/10/TXM_Image_3.jpg"  runat="server" ID="lbl1" />

i tried using the javascript to change the css, but seems like it can't find the class name, i got the error message: Cannot read property 'style' of undefined

var abc = document.getElementsByClassName("page cover")[0];
  abc.style.background = "#ddd url(http://txm.com.au/wp-content/uploads/2013/10/TXM_Image_3.jpg) no-repeat center center";

i also tried to change the css from code behine

string strClass = divContent.Attributes["class"];
    if (strClass == "page cover")
    {
           // change css
    }

but the strClass return "${theClass}" instead of "page cover"