geditで背景画像に外部CSSを使用する方法

HTMLとCSSに関するいくつかのクラスを取っていますが、私は実際に外部CSSを使って背景画像を作成する方法を理解するのに苦労しています。私は他の方法で外部のCSSで成功しています、ちょうど背景画像ではありません。geditで背景画像に外部CSSを使用する方法

これはHTMLのための私のコードです：

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 

    <title>Forms</title> 
    <link rel="stylesheet" type="text/css" href="/CSS/forms.css"> 
    </head> 
    <body> 
    <div id="Pictures"</div> 
    </body> 
    </html>

そしてこれはCSSのために私のコードです：

#Pictures { 
    background-image:url(../home/brian/Desktop/Becky.JPG); 
}

私はそれが<style>タグではなく、外部のCSSを使用して仕事を得ることができます。

出典

2016-04-12 BJsgoodlife

あなたの画像パスのような音は、「../ home/brian/Desktop/Becky.JPG」と間違っています。あなたの質問をあなたのフォルダ構造で更新してください。 – j08691

@ J08691-ご意見ありがとうございます。あなたが何を意味するのか分からないので、私はあなたの権利を賭けています。私は/home/brian/Desktop/Becky.JPGがフォルダ構造だと思った。私はUbuntuを使用しています。これは手がかりも提供するかもしれない。私はこの方法でフォルダ構造を見つけています：イメージを見つけて右クリックしてプロパティにスカルダウンします。 – BJsgoodlife

ファイル構造はキーです。 .htmlファイルは、.jpgファイルに関連していますか？

デスクトップに置く代わりに、画像を置くために別のフォルダ（「アセット」や「画像」などと呼んでください）を使用することをお勧めします。外部CSSファイルで

index.htmlを
forms.css CSS/
資産/ Becky.jpg

パスになります。
だから、あなたのケースでは、あなたのファイル構造は次のようになりますその後も：

#Pictures { 
    background-image: url(../assets/Becky.jpg); 
}

出典

2016-04-12 16:07:16 Sven

#pictures { 
 
    background: url("http://www.w3schools.com/cssref/img_flwr.gif"); 
 
    background-size: 80px 60px; 
 
    background-repeat: no-repeat; 
 
    padding-top: 40px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <title>Forms</title> 
 
    <link rel="stylesheet" type="text/css" href="/home/red/Desktop/Web Projects/Test/style.css"> 
 
</head> 
 

 
<body> 
 
    <div id="pictures"></div> 
 
</body> 
 

 
</html>

出典

2016-04-12 16:22:29

geditで背景画像に外部CSSを使用する方法

答えて

関連する問題