css 背景画像の設定の仕方

Posted at 2024-10-15

background-repeatプロパティ

background-image:url();と記述することで背景画像を設定することができるのですが、繰り返し表示を特に指定しないと無限に繰り返しをします。
background-repeatプロパティを使うことで繰り返す方向を指定することができます。
指定方法は４種類です

repeat
- 特に指定せずに繰り返す
repeat-x
- 横方向に繰り返す
repeat-y
- 縦方向に繰り# background-repeatプロパティ
  background-image:url();と記述することで背景画像を設定することができるのですが、繰り返し表示を特に指定しないと無限に繰り返しをします。
  background-repeatプロパティを使うことで繰り返す方向を指定することができます。
  指定方法は４種類です
repeat
- 特に指定せずに繰り返す
repeat-x
- 横方向に繰り返す
repeat-y
- 縦方向に繰り返す
no-repeat
- 繰り返しをしない

今回は１つだけテストコードを紹介します。使用した画像はタブレットで簡単に自作したものです。

index.html


<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>
    <body>

        <p>背景画像を表示します</p>

    </body>

</html>

style.css


body{
    background-image: url("背景画像.png");
    background-repeat: repeat-x;
                           /*4種類の指定方法
                             repeat
                             repeat-x
                             repeat-y
                             no-repeat*/
}

background-sizeプロパティで大きさを指定

大きさを指定する方法は２種類あります

数値で指定 px rem %を指定
cover containでして
- cover 表示領域を埋めるように表示背景画像が大きい場合は見切れて表示する。
- contain 画像の比率を保ち画像全部を表示する

今回はcssのみ紹介します

style.css


body{
    background-image: url("背景画像.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

height: 100vh;について説明

cssで要素の高さをビューポートの高さに基づいて設定するプロパティ。
vhはViewport Heightの略称 100vhはビューポートの高さの100% 常に画面の高さと同じになるという意味である。
20vhで検証した場合表示領域の20%を常に保っていた。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up