CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで背景画像を繰り返し表示させない方法

CSSの background-image プロパティを使ってWebサイトに背景画像を設定した際、画像がページの幅と高さいっぱいに無限に繰り返し表示されてしまうことに気づいたことはありませんか?

これは、ブラウザのデフォルト設定で background-repeat プロパティが repeat に指定されているためです。デフォルトでは、背景画像が要素全体を埋め尽くすまでタイル状に繰り返し表示される仕組みになっています。

background-repeat を no-repeat に変更する

背景画像の繰り返しを止めるには、デフォルトの repeat の値を no-repeat に上書きするだけです。以下のように記述します。

body {
  background-image: url("path-to-image.jpg");
  background-repeat: no-repeat;
}

これで背景画像は一度だけ表示されるようになります。

補足: ショートハンドプロパティを使う方法

background ショートハンドを使えば、背景画像と繰り返しの設定を1行でまとめて記述することもできます。

body {
  background: url("path-to-image.jpg") no-repeat;
}

また、background-position プロパティを組み合わせれば、繰り返しなしの背景画像の表示位置を細かく調整することも可能です。

  1. CSSで画像にボーダー（枠線）を追加する方法

    Webページ上の画像にボーダー（枠線）を追加したい場合、CSSの border プロパティを使うのが最も簡単な方法です。border プロパティは「太さ」「スタイル」「色」の3つの値をまとめて指定できるショートハンド（一括指定）プロパティです。 基本的な書き方 border プロパティは以下のように記述します。 border: 太さ スタイル 色; 例えば border: 8px solid rgb(0, 238, 255); と指定すると、8pxの太さの実線（solid）がシアン系の色で描画されます。 サンプルコード 以下は、CSSを使って画像にボーダーを追加する具体的なコード例です。 &l

  2. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo