gedit ile arka plan görüntüsü için harici css nasıl kullanılır

HTML ve CSS hakkında birkaç ders alıyorum ama gerçekten harici css ile arka plan görüntüsü nasıl yapılacağını anlamakta zorlanıyorum. Harici css'de başka yollarla başarılıyım, arka plan görüntüsü değil.gedit ile arka plan görüntüsü için harici css nasıl kullanılır

Bu HTML için benim kodudur:

<!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>

Ve bu CSS benim kodudur:

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

Ben <style> etiketi ancak harici bir CSS kullanarak işe alabilirsiniz.

kaynak

2016-04-12 BJsgoodlife

Sadece resim yolunuzun yanlış olduğu gibi geliyor * ../ home/brian/Desktop/Becky.JPG'. Sorunuzu klasör yapınızla güncelleyin. – j08691

@ J08691 - Yorumunuz için teşekkür ederim. Haklısın, çünkü ne demek istediğinden emin değilim. /home/brian/Desktop/Becky.JPG klasör yapısı olduğunu düşündüm. Bu yardımcı olursa Ubuntu kullanıyorum. Bu da bir ipucu verebilir. Klasör yapısını bu şekilde buluyorum: Görüntüyü bulup sağ tıklayıp özellikleri bulmaya çalışıyorum. – BJsgoodlife

Dosya yapısı anahtardır. .html dosyanız, .jpg dosyanızla ilişkili olarak nerede?

Görüntülerinizi Masaüstünüze koymak yerine başka bir klasör (resimlere 'öğeler' veya 'resimler' olarak adlandırın) kullanmanızı öneririz.
Yani, sizin durumda dosya yapısı şu şekilde görünecektir:

index.html
css/forms.css
varlıklar/Becky.jpg

harici css dosyasında yolu olur sonra be:

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

kaynak

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>

kaynak

2016-04-12 16:22:29

gedit ile arka plan görüntüsü için harici css nasıl kullanılır

cevap

İlgili konular