Tahribat.com Forumları
Html - CSS - XML - JavaScript - Ajax
Responsive (Background) Mantık Yürütmecesi
Html - CSS - XML - JavaScript - Ajax
Responsive (Background) Mantık Yürütmecesi
Responsive (Background) Mantık Yürütmecesi
-
Hocam bu resim temsilidir 1366 x 768 çözünürlükte css ile arkaplan olarak kullandığımı varsayalım
Kodçuk şu
background: url(arka.jpg) no-repeat center top fixed; background-size: cover;
Hedefimiz responsive görünümlerde bayanı ön planda tutmak..
Karşılaştığım sorunlar:
1-) Ekran çözünürlüğüm 1366 x 768 olmasına rağmen bayanın ayak kısmını tam göremiyorum.
background-size: 100% 100% deniyorum, bu seferde ekran boyutlandığında resim bozuluyor.
2-) Mobilde açtığımda center dan kaynaklı bayan dışarda kalıyor ya da ekranın sağından el kısmı gözüküyor
morf1n tarafından 03/Eyl/15 19:52 tarihinde düzenlenmiştir
no-repeat center top fixed olan kısmı no-repeat right top fixed olarak değiştirip sağ baş sabit yaptığımda
Pc'de sorun çözülmüş oluyor ekran boyutlansa da bayan gözüküyor, lakin mobilde açtığımda ekran dikey olduğundan çözünürlük farkından dolayı bayan dışarıda kalıyor.
İşin üstadları bu konuya el atarsa sevineceğim, yoksa error vermek üzereyim. 2 gündür uğraşıyorum araştırıyorum çözemedim.
Benzer problemler yaşayan arkadaşlarada aydınlatıcı bir konu olacağından eminim.
En son dinlenip düşünürken aklıma şöyle bir fikir geldi;
PC, Telefon, Tablet çözünürlüklerinin en boy oranlarına göre css @media özelliği ile (önceden ayarlanmış) farklı resimleri kullanmak. (örn: bg_pc.jpg, bg_telefon.jpg gibi)
Bu problemi çözecek gibi lakin biraz yoracağa benziyor temaya uyarlaması vs. Geliştirmeye koyulmadan önce css ustalarının fikirlerine danışmak istedim.
Saygılar. -
arkaplan olarak değil de img olarak responsive yapsan olmaz mı.
illa arkaplan diyorsan boyutlara göre kes parçala.
-
Cepte olduğumdan link veremiyorum ama yorum yaptığım son konulara bakarsa yada forumda aratirsan ayrıntılı yazmistim
-
hocam kadını dekupe et ayır, background sabit kalsın. kadının kesildiği yerler backgrounda uyumlu şekilde doldurulsun bence mis gibi olur :D gerisi kodcunun işi.