search
LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

ローカルの画像をCSSで適用する方法

プログラミングの勉強日記

2020年6月4日 Progate Lv.83
ウェブページ制作中
CSS(back-ground-image)で背景画像が表示されなかった。

background-imageの使い方

 background-image: url( 画像ファイルのURL );
 background-image: url("画像ファイルへのパス");

urlと半角括弧の間にはスペースを入れない

index.html
<style>
  body{
    background-image:url(photo/S__520912916.jpg);
  } 
</style>

0602.PNG

このようにindex.htmlファイルと同じフォルダ内にphotoフォルダがあり、その中の画像ファイルS_520912916.jpgを背景として設定する場合、url()のファイルパス「photo/S_520912916.jpg」となる。

stylesheet.css
/* スタイルシートと同じディレクトリ */
background-image: url("image.png");  

/* スタイルシートから1つ上の階層 */
background-image: url("../image.png"); 

/* スタイルシートから1つ下の階層(今回の場合) */
background-image: url("./photo/S__520912907.jpg");

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0