背景は、カラーの上に画像を指定できる(backgroundプロパティ)

backgroundプロパティについて、制作事例でメモいたします。

  • backgraoundは、色とimgが同時に指定できる
  • imgは、png透明が反映させる
  • background: #CAE5CD url("sen.png" );
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ページのタイトルが入ります</title>
<style type="text/css">
#test {
  width: 320px;
  height: 320px;
  background: #CAE5CD url("sen.png" );
  background-size:100%;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

この記事を書いた人

山崎 大祐

現役コーダーでフロントエンジン寄りのWeb構築と運用ができます。(企画/デザイン/構築/運営)
すきなもの「赤色・キューブ・コンクリート」