Bu dersimizde css ile nasıl büyük boyutlu resimleri nasıl ortalarız onu anlatacağım.Şu şekilde anlatayım.Sitemizin içeriği 960 px ama arkaplanımızın boyutu 2000px civarlarında.Bizde bunu tam ortalıklı şekilde durmasını istiyoruz.Kodlara geçelim.
Önce arkaplan atayacağımız alanı oluşturalım.
<div class="arkaplan"></div>
Şimdide arkaplan resmi atayalım cssle.
.arkaplan{
min-width:960px;
min-height:960px;
background-color:#000;
background-image:url(http://u1311.hizliresim.com/1h/h/uk8x7.jpg);
background-position:center;
background-repeat:no-repeat;}
Yukarıda önce minimum alan boyutlarımızı ayarladık.Sonrada background-image ile arkaplan verdik.Daha sonra background-positionla arkaplanı ortalayıp,background-repeatla tekrarlanmasını kapattık.Bu şekilde yakın görünümde de tam ortada olacak,uzak görünümde de tam ortalıklı olacaktır arkaplan.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
.arkaplan{
min-width:960px;
min-height:960px;
background-color:#000;
background-image:url(http://www.hdwallpapersdj.com/wp-content/uploads/2013/10/616498554_13574183721.jpg);
background-position:center;
background-repeat:no-repeat;}
</style>
</head>
<body>
<div class="arkaplan"></div>
</body>
</html>
Yakın görüntüsü :
Uzak görüntüsü :
UstaDerslik
