Çözüldü CSS background çalışmıyor

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

walter wick

Hectopat
Katılım
5 Kasım 2021
Mesajlar
4.806
Makaleler
1
Çözümler
71
Yer
albuquerque
Daha fazla  
Cinsiyet
Erkek
Meslek
ırkçı
Arka plana fotoğraf koymak istiyorum ama olmuyor. Bir bakar mısınız?

1666016497518.png


HTML:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>profile card</title>
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="reset.css">
</head>
<body>
 <div class="profilecard">
 <figure class="image.png">
 <img src="download.jpg" alt="..."
 </figure>
 <div class="image__desc"></div>
 </div>
 <h1>ömer </h1>
 <div>beginer developer</div>
 <div style="display: flex;align-items:center;gap: 10px;;">
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
 <circle cx="12" cy="11" r="3"></circle>
 <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path>
 </svg>
 <span>türkiye </span>
 </div>
 <div class="profile-card__info">
 <div>
 <div>850</div>
 <div>takipci</div>
 </div>
 <div>
 <div>50</div>
 <div>tercihler</div>
 </div>
 <div>
 <div>105</div>
 <div>iş</div>
 </div>
 </div>
 <div class="profile-card__social">
 <a href="#"class="facebook" >
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">

 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
 <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
 </svg>
 </a>
 <a href="#"class="instgram" >
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
 <rect x="4" y="4" width="16" height="16" rx="4"></rect>
 <circle cx="12" cy="12" r="3"></circle>
 <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
 </svg>
 </a>
 </div>
 <div class="profile-card__actions">
<button class="blue">send mesaage</button>
<button class="orange">takip et </button>
 </div>

 </div>
</body>
</html>

CSS:
@import url('https://fonts.googleapis.com/css2? family= Nunito:wght@300;400;500;600;700 & display=swap');

body {
 font: 18px "nunito" , sans-serif ;
 color: black;
 min-height:100vh ;
 padding: 2rem;
 display :flex ;
 justify-content: center;
 align-items: center;

 & ::before {
 content: '';
 position: fixed;
 inset: 0;
 z-index:-1 ;
 pointer-events: none ;
 background: <img src="download.jpg" no-repeat center ;
 background-size: cover;
 }
}
@keyframes
 {

}

@Ecmel
 
Çözüm
Peki hocam normalde daha CSS'e başlamamıştım ama dedim kendimi bir deneyeyim ama durmak yok.
Dediğim gibi basitten başlamak ve ilerlemek gerekli. Bir anda her şeye birden girişmek böyle sonuçlar doğurabilir. Parça parça gidip en sonunda hepsini birleştirmek daha faydalı olacaktır. İyi çalışmalar. :)

Koddaki hata için tekrar dediğim gibi before özelliğini büyük ihtimal body'e vermek istiyorsunuz ama onun yerine "&" yazmışsınız. Onu düzeltip bir de body'nin kendisini süslü parantezle kapatırsanız istediğinize ulaşırsınız.
CSS kısmında background verirken hata yapmışsınız.

background: url(resimyolu)no-repeat center ;
Şeklinde düzenlerseniz düzelecektir.
 
& Adlı bir yapı göremiyorum kodda. Before verdiğiniz bir yapı yok yani. Orada & yerine Body'e mi vermek istiyordunuz. Body süslü parantezle de kapatılmamış.

Hocam sadece bir video izledim adamın yaptığını yapmaya çalışıyordum arka plana resim koymak istiyorum sublime Text'de böyle gözüküyor galiba bir yerde hata yaptım.

1666019651789.png
 
Hocam sadece bir video izledim adamın yaptığını yapmaya çalışıyordum arka plana resim koymak istiyorum sublime Text'de böyle gözüküyor galiba bir yerde hata yaptım.

Eki Görüntüle 1546602
Hatayı açıkladım ama çok yabancısınız sanırım bu konuya. Çünkü dosya adlarında bile sorunlar olduğunu görebiliyorum.

En iyisi baştan başlamanızı tavsiye edeceğim. Çünkü şu andaki gidişata baktığımda bu hatayı hallettiğiniz zaman bile ilerde hata çıkmaması çok zor duruyor.

Hiç bilginiz olmadan direkt böyle örneklere değil de daha basitten başlayarak ilerlemenizi tavsiye ederim. Kodunuz hiç sağlıklı durmuyor.
 
Hatayı açıkladım ama çok yabancısınız sanırım bu konuya. Çünkü dosya adlarında bile sorunlar olduğunu görebiliyorum.

En iyisi baştan başlamanızı tavsiye edeceğim. Çünkü şu andaki gidişata baktığımda bu hatayı hallettiğiniz zaman bile ileride hata çıkmaması çok zor duruyor.

Hiç bilginiz olmadan direkt böyle örneklere değil de daha basitten başlayarak ilerlemenizi tavsiye ederim. Kodunuz hiç sağlıklı durmuyor.

Peki hocam normalde daha CSS'e başlamamıştım ama dedim kendimi bir deneyeyim ama durmak yok.
 
Peki hocam normalde daha CSS'e başlamamıştım ama dedim kendimi bir deneyeyim ama durmak yok.
Dediğim gibi basitten başlamak ve ilerlemek gerekli. Bir anda her şeye birden girişmek böyle sonuçlar doğurabilir. Parça parça gidip en sonunda hepsini birleştirmek daha faydalı olacaktır. İyi çalışmalar. :)

Koddaki hata için tekrar dediğim gibi before özelliğini büyük ihtimal body'e vermek istiyorsunuz ama onun yerine "&" yazmışsınız. Onu düzeltip bir de body'nin kendisini süslü parantezle kapatırsanız istediğinize ulaşırsınız.
 
Çözüm
Dediğim gibi basitten başlamak ve ilerlemek gerekli. Bir anda her şeye birden girişmek böyle sonuçlar doğurabilir. Parça parça gidip en sonunda hepsini birleştirmek daha faydalı olacaktır. İyi çalışmalar. :)

Koddaki hata için tekrar dediğim gibi before özelliğini büyük ihtimal Body'e vermek istiyorsunuz ama onun yerine "&" yazmışsınız. Onu düzeltip bir de Body'nin kendisini süslü parantezle kapatırsanız istediğinize ulaşırsınız.

Evet hocam en iyisi yavaş ilerlemek teşekkür ederim. Bu arada böyle yapınca oldu ama ben yine de daha iyi öğreneyim.
 
Kodlarda SASS'ın nesting özelliğini kullanmışsınız, muhtemelen izlediğiniz videodaki arkadaş CSS yerine SASS kullanıyordu o nedenle böyle yazdı kodunu. Ancak CSS'in böyle bir özelliği yok, SASS'ın özelliğidir o, o yüzden sende işe yaramaz.
 

Geri
Yukarı