Bu yazımda sizlere jQuery ile tüm tarayıcılarda çalışan ölçeklendirilebilir arkaplan yapımını göstereceğim. html kodlarımız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery ile Ölçeklendirilebilir Background</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="jquery-2.2.0.min.js"></script> <script src="js.js"></script> </head> <body> <div class="background"> <img src="" alt="Background"> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function(){ /* ölçeklemek için fonksiyonumuzu oluşturuyoruz */ $.olcekle = function(){ /* burada ekranın genişliğini ve yüksekliğini değişkenlerimize alıyoruz */ var width = $(window).width(); var height = $(window).height(); /* burada background div'inin içindeki img'e ekranın yüksekliğini ve genişliğini atıyoruz */ $(".background img").css({ "width" : width + "px", "height" : height + "px" }); } /* fonksiyonumuzu çalıştırıyoruz */ $.olcekle(); /* burada ekran boyutu küçültüğünde ya da büyütüldüğündeki boyuta göre tekrar ölçekliyoruz */ $(window).bind("resize", function(){ $.olcekle(); }); }); |
|
1 2 3 4 5 6 7 8 9 |
body { margin: 0px; } .background{ position: fixed; left: 0; top: 0; z-index: -1; } |
Okumaya devam...