CSSシミュレータ（background-image:url()） 画像1枚用

【使い方】textareaの中身（値）を書き換えて色々と試してみる <style> #backgroundImageDisplay1 { width:100%;height:300px;border:10px dashed lime;padding:20px;box-sizing:border-box; background-color: transparent ; /*①背景色*/ background-image: url(" none ") ; /*②背景画像*/ background-repeat: repeat ; /*③画像の繰り返し表示*/ background-clip: border-box ; /*④背景の表示領域*/ background-origin: padding-box ; /*⑤画像の表示起点*/ background-size: auto ; /*⑥画像サイズ*/ background-position: left top ; /*⑦画像の表示位置*/ background-attachment: scroll ; /*⑧画像の移動*/ background-blend-mode: normal ; /*⑨背景色と背景画像、背景画像同士の混合*/ </style> 画像2枚以上用はこちら

サンプル画像（小） https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1r95FIoQkIjLGXVn13yTM0xhv7c_FRZ0kmzXdafsosJGPSRcW5YLecZ0TMByUdjCMdXnqUedVHVPnUXFBvSZs4gBSQGTOOTweJN5sHHkah7NMrlsI8s2dsCK6N_84CcDMteykb2FqoKUK/s1600/%25E7%25AC%2591%25E9%25A1%2594.png
サンプル画像（大） https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuqCIHi4LLEQxPlw-fB3Sur9AsiL44ZGi1HmpteZWCOPi7sbkm2XcioodaiDHuvcEwCVCH4W7cniD6HKadKMJ-dbA1FXsZR2NME_EgkyXiYwdiq8NwiIQC9WLLG_MSk5IVetBbCme3f4Dh/s1600/%25E7%258C%25BF%25E4%25B8%2589.png

①背景色 / background-color
　カラーネーム、カラーコード、RGB、RGBAで指定する
　初期値はtransparent（透明）

②背景画像 / background-image
　初期値はnone

③画像の繰り返し表示 / background-repeat
　no-repeat / 1回限り、繰り返しなし
　repeat / 縦横両方向に繰り返し
　repeat-x / 横方向に繰り返し
　repeat-y / 縦方向に繰り返し
　round / 画像の縦横比で調節
　space / 余白で調節

④背景の表示領域 / background-clip（background-colorで確認すればわかりやすい）
　border-box / borderとpaddingを含む領域に表示
　padding-box / borderを除きpaddingを含む領域に表示
　content-box / borderとpaddingを除く領域に表示

⑤画像の表示起点 / background-origin
　padding-box / borderを除きpaddingを含む領域の左上が起点
　border-box / borderとpaddingを含む領域の左上が起点
　content-box / borderとpaddingを除く領域の左上が起点

⑥画像サイズ / background-size /
　auto / オリジナルサイズ
　contain / 表示領域に入り切る最大サイズ
　cover / 表示領域を埋め尽くす最小サイズ
　px / 横 縦 の順に指定（1つだけ指定すればwidth、heightはauto）
　% / 横 縦 の順に指定（表示領域に対する割合、1つだけ指定すればwidth、heightはauto）

⑦画像の表示位置 / background-position（px, %は左上が起点）
　左上 / left top = 0% 0% = left 0% top 0% = right 100% bottom 100%
　中上 / center top = 50% 0% = left 50% top 0% = right 50% bottom 100%
　右上 / right top = 100% 0% = left 100% top 0% = right 0% bottom 100%
　右中 / right center = 100% 50% = left 100% top 50% = right 0% bottom 50%
　右下 / right bottom = 100% 100% = left 100% top 100% = right 0% bottom 0%
　中下 / center bottom = 50% 100% = left 50% top 100% = right 50% bottom 0%
　左下 / left bottom = 0% 100% = left 0% top 100% = right 100% bottom 0%
　左中 / left center = 0% 50% = left 0% top 50% = right 100% bottom 50%
　中央 / center = 50% = left 50% top 50% = right 50% bottom 50%

⑧画像の移動 / background-attachment
　scroll / スクロール
　fixed / 固定
　local / 子要素でもスクロール

⑨背景色と背景画像、背景画像同士の混合 / background-blend-mode
　normal /
　multiply /
　screen /
　overlay /
　darken /
　lighten /
　color-dodge /
　color-burn /
　hard-light /
　soft-light /
　difference /
　exclusion /
　hue /
　saturation /
　color /
　luminosity /

HTML <div id="backgroundImageDisplay1"></div> <⚠textarea style="width:99%;height:200px;font-family:monospace;" id="backgroundImageTextarea1" onInput="backgroundImageSimulator1();"> <style> #backgroundImageDisplay1 { width:100%;height:300px;border:10px dashed lime;padding:20px;box-sizing:border-box; background-color: transparent ; /*①背景色*/ background-image: url(" none ") ; /*②背景画像*/ background-repeat: repeat ; /*③画像の繰り返し表示*/ background-clip: border-box ; /*④背景の表示領域*/ background-origin: padding-box ; /*⑤画像の表示起点*/ background-size: auto ; /*⑥画像サイズ*/ background-position: left top ; /*⑦画像の表示位置*/ background-attachment: scroll ; /*⑧画像の移動*/ background-blend-mode: normal ; /*⑨背景色と背景画像、背景画像同士の混合*/ </style> <⚠/textarea><!--⚠は削除する-->

JavaScript <script> var backgroundImageSimulator1=function(){ document.getElementById("backgroundImageDisplay1").innerHTML=document.getElementById("backgroundImageTextarea1").value; } onLoad=backgroundImageSimulator1(); </script>