HTML/CSS sorularım

[Gizli]

şimdi html, css ile bir şeyler deniyorum da bir yerde takıldım size sormak istedim. css grid ile ayırdım bölmelere. İstiyorum ki asıl contenti içeren kutuyu içerisinde bulunduran containera hareketli, hafif saydam background imagelardan oluşan bir fotoğraf kolajı koyayım. animasyon şeysini de infinitive yapayım aynı resimler dönsün dursun sürekli. 
1) Bu dediğimi background-image ile mi yapmalıyım yoksa normal img komutu ile mi? istiyorum ki 10-20 tane fotoğrafın url'sini bulup ekleyeyim, bunu da background-image ile yapabilir miyim? Gördüğüm örnekler hep tek bir image üzerineydi çünkü. Öte yandan bulduğum fotoğrafların boyutları ve çözünürlükleri farklı. Bu sebeple paintten tek bir görsel haline getirip upload etmek de güzel bir yol gelmiyor.
2) Contenti içerecek kutuyu aling-self ve justfiy-self ile centerladım aslında ama koyduğum her görsel ile aşağı kayıp footer'a ait bölmelerin içine giriyor. Bunu nasıl çözerim?  Benim yapmaya çalıştığım şeyde contenti içeren bölüm container ile aynı düzlemde değil, container'a koyduğum imagelar contentin arkasında görünecek ve aralarında hiç etkileşim olmayacak.

[Nekro]

jsfiddle a falan yüklersen daha iyi anlaşılır nerde hata var. carousel gibi bir şeyi de js ile daha rahat yapabilirsin

[Gizli]

https://jsfiddle.net/fnuwgxsa/

Şöyle bir şey yapmaya çalışmıştım. Mavi=header, kırmızı=footer, sarı=content olacak. Sarı bölümü sabitlemeyi başardım position'ı absolute yaparak da eklediğim görsellerin yeşil bölgenin dışına taşmasını istemiyorum. Browser'ı büyütüp küçültünce falan resimler girmemeleri gereken bölümlere taşıyorlar.

Sonrasında da o fotoğraflara animasyon ekleyip döndürmeyi düşünmüştüm ama daha iyi bir fikriniz varsa duymak isterim.

Henüz js bilmiyorum bu sebeple sadece html ve css kullanabilirim sdf

Şubat 6, 2022 Gizli tarafından düzenlendi

[eregorn]

css içinde margin kullanmamışsın hiç. sorun bundan kaynaklı olabilir mi?

 

Şubat 6, 2022 eregorn tarafından düzenlendi

[Nekro]

position i absolute vermeye gerek yok orda. header, contents, footer diye ayırmışsın zaten inline olarak duruyorlar. fotoları taşmadan göstermen için şöyle düzenledim.

https://jsfiddle.net/v8t360wd/20/

Ama carousel mantığında çalışan bir element i js kullanmadan yapma yolu hiç bilmiyorum pek mümkün olmayabilir. mümkünse de çok gereksiz karmaşık olabilir her türlü luzumsuz.

[Gizli]

Teşekkür ederim zaman ayırdığınız için.

[KillJoy]

belki bu işini görür
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_grid_responsive

[neutrino]

Bu botu banlayin ya nedir böyle