Forum
Aktif konular
Üyeler
Kurallar
Arama
Arkplan Resminin Tamamını Göstermek Arkplan Resminin Tamamını Göstermek
-
Merhaba arkadaşlar,
Bir arkaplan resmim var ve bunu <body style="background:url(images/arkaplan.jpg) no-repeat;"> olarak arka plana yerleştiriyorum fakat çözünürlük ne olursa olsun resmin tamamının görünmesini istiyorum kaydırma çubuğu çıkmıyor misal kaydırma çubuğu çıksın resim aşağıya kadar görünsün nasıl yapılabilir? -
resmin boyutunu bilgisayarda büyüterek yükledikten sonra arkaplan olarak ayarla :)
-
ayarladım hocam ama alt kısmı görünmüyor resmin
-
en basiti body için min-width min-height tanımla resim boyutu kadar ancak crossbrowser olması için bazı taktikler var onlara bir göz at googledan
edit: http://www.fatihhayrioglu.com/genislik-ve-yuksekligin-sinirlarini-belirlemekmin-width-min-heightmax-width-max-height/
-
yapmak istediğin olayın adı cover
-
Bir de şöyle bir olay var daha mantıklı
http://css-tricks.com/perfect-full-page-background-image/
-
<body style="background:url(images/arkaplan.jpg) no-repeat; min-height:500px; min-width:585px;">
şeklinde yaptım oldu ie haricinde crossbrowser da oldu :D -
slm hocam dediğin tarzda daha önce bir iş yapmıştım. sağlıklı bir yöntemdir senin işini fazlasıyla görecektir. bu scripti kullan script içerisinde çagrılan css leri kendine göre uyarla bunlar için ayrı ayrı büyüklükte aynı bg resimlerine ihtiyacın olacaktır. karmaşık gelirse eğer sadece switch yapısını kullan aynı özellikleri yine kullan sadece $('div#bodyClass').addClass('screenHeight600'); bu satır kalsın hepsinde gerisini sil ve o satır zaten ilgili çözünürlükte body e eklenicektir. sende o çözürünürlüğe göre bg ni çagırırsın.
var screenHeight = Number(screen.height);
var screenWidth = Number(screen.width);
var linkd = document.createElement("link");
var otherel = document.getElementsByTagName('link')[0];
linkd.setAttribute("rel", "stylesheet");
linkd.setAttribute("type", "text/css");
switch (screenHeight) {
case 600:
{
$('div#bodyClass').addClass('screenHeight600');
linkd.setAttribute("href", "style/bg/background-600.css");
otherel.parentNode.insertBefore(linkd, otherel);
break;
}
case 768:
{
$('div#bodyClass').addClass('screenHeight768');
linkd.setAttribute("href", "style/bg/background-768.css");
otherel.parentNode.insertBefore(linkd, otherel);
break;
}
case 800:
{
$('div#bodyClass').addClass('screenHeight800');
linkd.setAttribute("href", "style/bg/background-800.css");
otherel.parentNode.insertBefore(linkd, otherel);
break;
}
case 1024:
{
$('div#bodyClass').addClass('screenHeight1024');
linkd.setAttribute("href", "style/bg/background-1024.css");
otherel.parentNode.insertBefore(linkd, otherel);
break;
}
case 1050:
{
$('div#bodyClass').addClass('screenHeight1050');
linkd.setAttribute("href", "style/bg/background-1050.css");
otherel.parentNode.insertBefore(linkd, otherel);
break;
}
case 1200:
{
$('div#bodyClass').addClass('screenHeight1200');
linkd.setAttribute("href", "style/bg/background-1200.css");
otherel.parentNode.insertBefore(linkd, otherel);
break;
}
default:
{
if(SW>1680){
$('div#bodyClass').addClass('screenHeight1200');
linkd.setAttribute("href", "style/bg/background-1200.css");
otherel.parentNode.insertBefore(linkd, otherel);
}
else{
$('div#bodyClass').addClass('screenHeight1024');
linkd.setAttribute("href", "style/bg/background-1024.css");
otherel.parentNode.insertBefore(linkd, otherel);
}
}
}
-
Bu plug'inlerden herhangi birini kullanarak rahatlıkla yapabilirsin hocam.
http://johnpatrickgiven.com/jquery/background-resize/
http://bavotasan.com/demos/fullbg/
Ben biraz daha araştırma yapmak istiyorum dersen, örnek arama linki de http://bit.ly/Miv2iQ
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla