タイトルの通り、HTMLにcssファイルから読み込んだ画像を表示したいです。
cssファイルとhtmlファイル、imgフォルダは同じ階層に、
画像は、imgフォルダの中にあります。
によると、
background-image: url("./orange/ponkan.gif");
引用テキスト「./」は『現在のフォルダ』を意味する特殊な記述方法です。「./orange/」で、『現在のフォルダの中にある「orangeフォルダ」』を示します。
とあり、同様の書き方をしてると思うのですが、表示がうまくされません。
超初歩的だとは思いますが、回答頂けましたら幸いです。
body { text-align: center ; font-size: 16px ; font-family: Arial, sans-serif; //下記、書き方がわかりません。。。 background-image: url("./img/background1.jpg"); } h1 { font-size: 50px ; } .box { list-style-type: none text-align:center; margin-bottom: 20px; width: 400px; height: 50px; font-size:30px; padding: 7px; color: #fff; border:4px solid #000000; border-radius: 5px; background: #f44336; cursor:pointer; } li{ text-align: center; margin:auto; } .setsumei{ font-size: 20px; }
<!DOCTYPE html> <html lang ="ja"> <head> <meta charset ="utf-8"> <title>名言ボックス</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <!---後で画像入れる ↓---> <h1>名言ボックス</h1> <ul> <li class="box" id="box1">?</li> <li class="box" id="box2">?</li> <li class="box" id="box3">?</li> </ul> <p class="setsumei">どっかで聞いたことのある名言たちが</p> <p class="setsumei">クリック一つで生み出される!</p> <script type="text/javascript" src="script.js"></script> </body> </html>
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/03/02 03:15