タイル背景画像一覧

画像情報

画像URL 幅x高さ

カスタマイズ

透明度設定

つかいかた

欲しい画像の上で右クリック→背景画像を保存できます

左クリックすると、
その背景が画面全体に反映され、
重ね合い効果を生み出します

重ねあって出来た模様は
「PrintScreen」キーで保存してください

機能

要素を指定回数繰り返して追加

要素が何番目かを取得して、属性値を変更

指定要素クリックで全体背景を変更

モアレモアレモアレキモイキモイキモイ

アニメーションGIF

移動やフェードアウトなど

ディレイは0.2秒


  view source
  JavaScript
  $(function(){
	var colors = new Array(
		'ffffff',
		'000000',

		'ff0000',
		'00ff00',
		'0000ff',
		'ff00ff',
		'00ffff',
		'ffff00',

		'800000',
		'008000',
		'000080',
		'800080',
		'008080',
		'808000',

		'804040',
		'408040',
		'404080',
		'804080',
		'408080',
		'808040',

		'ff8080',
		'80ff80',
		'8080ff',
		'ff80ff',
		'80ffff',
		'ffff80',

		'ffc0c0',
		'c0ffc0',
		'c0c0ff',
		'ffc0ff',
		'c0ffff',
		'ffffc0'
	);

  var dir = '/img/bg_tile/';
  var bg_tiles = [
    'svg-dot0-1x1',
    'svg-dot1-2x2',
    'svg-dot2-2x2',
    'svg-dot1-3x3',
    'svg-dot-line-2x2',
    'svg-dot-line3-4x4',
    'svg-dot-line4-3x3',
  ];
  var ul_dom;
  var li = $('<li>');
  var i;
  var n;

  ul_dom = $('ul.col');
  for(var i=0; i<colors.length; i++){
    var lic = $('<li>')
      .css({backgroundColor:'#'+colors[i]}).attr({title:colors[i]});
    ul_dom.append(lic);
  }
  ul_dom = $('ul.png');
  for(var i=0,len=bg_tiles.length; i<len; i++){
    //var n = formatNum(3, i);
    var li_dom = li.clone();
    var img = dir + bg_tiles[i] + '.png';
    li_dom.css('background-image', 'url(' + img + ')').html('<span>' + n + '</span>');
    ul_dom.append(li_dom);
  }
/*
  ul_dom = $('ul.png_grad');
  for(var i=200; i<210; i++){
    var n = formatNum(3, i);
    li_dom = li.clone();
    li_dom.css('background-image', 'url(' + dir + n + '.png)').html('<span>' + n + '</span>');
    ul_dom.append(li_dom);
  }
  ul_dom = $('ul.gif');
  for(i=70; i<89; i++){
    n = formatNum(3, i);
    li_dom = li.clone();
    li_dom.css('background-image', 'url(' + dir + n + '.gif)').html('<span>' + n + '</span>');
    ul_dom.append(li_dom);
  }
  for(i=100; i<112; i++){
    n = formatNum(3, i);
    li_dom = li.clone();
    li_dom.css('background-image', 'url(' + dir + n + '.gif)').html('<span>' + n + '</span>');
    ul_dom.append(li_dom);
  }
*/


  var ul_dom = $('.opacity');
  for(i=10; i>0; i--){
    ul_dom.append('<option>'+i+'</option>');
  }


  $('.opacity').change(function(){
    var opc = $(this).val() / 10;
    $('html').fadeTo("normal", opc);
  });
  
  $('#text_hide').click(function(){
    $('span').toggle();
  });

  var images_ele = $('#images');
  $('ul li').click(function(){
    var col = $(this).css('background-color');
    var bg = $(this).css('background-image').replace(/"/g, '');
    images_ele.css('background-image', bg);
    images_ele.css('background-color', col);
    bg = bg.replace(/url\(/,'');
    bg = bg.replace(/\)/,'');
    $('.sample_img').attr('src', bg);
    $('.sample_text').text(bg + ' ' + $('.default').width() + 'x' + $('.default').height());
  });
});


function formatNum(keta, num) {
  var src = new String(num);
  var cnt = keta - src.length;
  console.log(cnt);
  while (cnt){
    src = "0" + src;
    cnt--;
  }
  return src;
}
  CSS
  h2{
  text-align:center;
  background-color:#333333;
  color:#ffffff;
}

#container{
  display:-webkit-box;
  display:-moz-box;
  display:box;
}

#images{
  width:640px;
}
#texts{
  background-color:#ffffff;
}

#demo ul li{
  float:left;
  width:64px;
  height:64px;
  font-size:22px;
  font-weight:bold;
}
#demo ul li span{
  background-color:#ffffff;
  color:#000000;
  display:none;
}
#demo ul.col li{
  width:20px;
  height:20px;
}
#demo ul:after{
	display:block;
	content:"";
	clear:both;
}

#area{
  width:100%;
  height:100%;
}
.big{
  width:128px;
  height:128px;
  image-rendering:-webkit-crisp-edges;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/img-tile-background/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。