그림처럼 XE STAGE 레이아웃에서 배경이미지를 자바스크립트 패턴으로 변경하려고 합니다. 

 

 

 

 

 

 

 

 

 

1) XE 관리페이지에서 [사이트 디자인 설정] - [레이아웃 ] - [ HTML/CSS ] 에서 HTML-layout.html 부분의 맨 하단에 아래와 같은 스크립트를 넣어 줍니다. 

<script>
var c = document.createElement( 'canvas' ),
    ctx = c.getContext( '2d' ),
    rows = cols = 36,
    gap = 1,
    grays = [
      [ 26, 29 ],
      [ 32, 37 ],
      [ 42, 50 ],
      [ 46, 56 ],
      [ 54, 66 ]
    ],
    sizes = [ 4, 9, 14 ],
    frequency = [ false, 30, 9 ],
    cw = ch = c.width = c.height = ( sizes[ 0 ] + gap ) * rows;

function random( max, min ) {
  var min = min || 0;
  return Math.random() * ( max - min ) + min;
}

function cell( x, y, size ) {
  var gray = Math.floor( random( grays.length ) ),
      fill = grays[ gray ][ 0 ],
      stroke = grays[ gray ][ 1 ];
  ctx.fillStyle = 'rgb(' + fill + ', ' + fill + ', ' + fill + ')';
  ctx.strokeStyle = 'rgb(' + stroke + ', ' + stroke + ', ' + stroke + ')';
  ctx.fillRect( x, y, size, size );    
  ctx.strokeRect( x + 0.5, y + 0.5, size - 1, size - 1 );
}

function generate() {
  var store = [];
  
  ctx.fillStyle = 'rgb(18, 18, 18)';
  ctx.fillRect( 0, 0, cw, ch );
  
  for( var x = 0; x < cols; x ++ ){
    for( var y = 0; y < rows; y ++ ){
      cell( 
        ( x * sizes[ 0 ] ) + ( x * gap ), 
        ( y * sizes[ 0 ] ) + ( y * gap ), 
        sizes[ 0 ] 
      );   
    }
  }
  
  for( var freq = 0; freq < frequency.length; freq++ ) {
    if( frequency[ freq ] ){
      for( var i = 0; i < frequency[ freq ]; ) {
        var canDraw = true,
            sizeNew = sizes[ freq ],
            pad = Math.ceil( ( sizeNew / cw ) * rows );
            xNew = Math.floor( random( 1, cols - pad ) ) * ( ch / cols ),
            yNew = Math.floor( random( 1, rows - pad ) ) * ( cw / rows ),            
            storeLength = store.length;
        if( storeLength ) {
          for( var j = 0; j < storeLength; j++ ) {
            var storeCell = store[ j ];
            if( !(
              xNew + sizeNew + ( cw / cols ) < storeCell.x ||
              yNew + sizeNew + ( ch / rows ) < storeCell.y ||
              xNew > storeCell.x + storeCell.size + ( cw / cols ) ||
              yNew > storeCell.y + storeCell.size + ( ch / rows )
            ) ) {
              canDraw = false;
              break;
            }
          }          
        }
        if( canDraw ) {
          cell( xNew, yNew, sizeNew );
          store.push( { x: xNew, y: yNew, size: sizeNew } );
          i++;
        }
      }
    }
  }
  
  document.body.style.background = 'url(' + c.toDataURL() + ')';
}

window.addEventListener( 'click', generate );
generate();
</script>

 

2) STAGE 레이아웃의 배경을 투명하게 바꿔줍니다. 
    
    [사이트 디자인 설정] - [레이아웃 STAGE] - [상세 설정] - [사용자 CSS ] - 사용자 CSS 수정 부분에  아래 코드 삽입 

#stage-content, #stage-contfull {background: transparent}