http___programlama.eu.com_HTMLandCSS_css3_background_css3-background-s1.htm_1.xml
1.1 1.2 2.1 2.2 2.3 3.1 4.1 4.2 5.1 6.1 7.1 7.2
Attempt to use a background image that doesn't span the height or width of the screen fully, and you get one ugly website. The new CSS3 background-size property will allow you to get around this unsightly problem. The solution involves using the new CSS3 background-size rule set to cover the entire viewport while maintaining the aspect ratio. Notice that the background-position is set to center center. This effectively places the center of the image in the center of the screen and then stretches (or shrinks) the image in all four directions. html { background-image: url('../images/bk.jpg'); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } As you can imagine, if you use too small of a background image and it is expanded on a large screen, you will get pixelation. In the case where you have a large image and having it rescaled to fit on a smaller screen, you waste bandwidth in downloading. A balanced approach of using original size backgrounds of say 1280x1024 and a smaller size of say 640x512 could work like this: /* Use the smaller image in the majority of screen size cases like tablets and handhelds */ @media screen and (max-width 640px) { html { background-image: url('bk-640x512.jpg'); /* take smaller image and rescale downwards */ background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } } @media screen and (min-width: 641px) and (max-width 959px) { html { background-image: url('bk-640x512.jpg'); /* take smaller image and rescale upwards */ background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } } /* Use larger image in wider screens. User could rescale window below 959px which would result in smaller image being loaded */ @media screen and (min-width 960px) { html { background-image: url('bk-1280x1024.jpg'); /* take image and rescale upwards and downwards */ background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; } }
1.1 2.1 3.1 4.1 5.1 6.1 7.1 8.1 9.1 10.1 11.1 12.1 13.1 14.1 15.1 16.1 17.1 18.1 19.1 20.1 21.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 35.1 36.1 37.1 38.1 39.1 40.1 41.1 42.1 43.1 44.1 45.1 46.1 47.1 48.1 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 57.1 58.1 59.1 60.1 61.1 62.1 63.1 64.1 65.1 66.1 67.1 68.1 69.1 70.1 71.1 72.1 73.1 74.1 75.1 76.1 77.1 78.1 79.1 80.1
Katlı Stil Sayfaları (Sürüm 3) Arka Plan (Background) Sayfa 1 / 3 Arka Plan Tanımı Arka plan, bir elementin görüntülenmek üzere hesaplandığı (render edildiği) alandır. Bu alan bir renk veya bir resim olacak şekilde belirtilebilir. CSS3 kutu modeli düşünülünce, arka plan içerik (content), gezinme yolu (padding) ve sınır çizgisi (border) kutularını kapsar. Marj alanı daima saydam olduğundan, ana/baba elementin arka plan rengi marj alanından daima görülür. Arka plan rengi kalıtımla geçmez. Buna rağmen, arka plan başlangıç rengi daima saydam olduğundan, arka plan renginin açıkça belirtilmediği durumlarda, ana/baba elementin arka plan rengi alanı kaplar. Kök elementin arka plan rengi tüm kanaviçeyi kaplar. Eğer tüm sayfanın arka planı hedeflenmek istenirse,   elementinin arka plan özelliğininin belirlenmesinin daha uygun olacağı belirtilmiştir. Arka Plan Özellikleri Arka Plan Rengi 'background-color' Özelliği (IE 6.02 SP2 bu özelliği desteklemektedir) Bu özellik, bir elementin arka plan rengini belirler. Arka plan rengi ('background-color') özelliği aşağıda verildiği gibi tanımlanmıştır: İsim:'background-color' Değer:  | inherit Başlangıç Değeri: transparent Uygulanabilecek Elementler: tüm elementler Kalıtım: hayır Yüzde: belirtilmemiştir. Medya: görsel (visual) Örnek: div.qq {background-color: #fffcef;} (IE 6 SP2 'background-color' özelliğini desteklemektedir) Arka Plan Resmi 'background-image' Özelliği(IE 6.02 SP2 bu özelliği desteklemektedir) Bu özellik, bir elementin arka plan resmini belirler. Bir arka plan resmi belirtilirken, resmin bulunamaması halinde kullanılmak üzere, bir de arka plan renginin belirtilmesi sağlık verilmektedir. Eğer arka plan resmi bulunursa, öncelikli olarak arka planı resim kapsayacaktır. Arka plan resminin saydam olan kısmından arka plan rengi de görülecektir. Arka plan resmi ('background-image') özelliği aşağıda verildiği gibi tanımlanmıştır: İsim:'background-image' Değer:  | none | inherit Başlangıç Değeri: none Uygulanabilecek Elementler: tüm elementler Kalıtım: hayır Yüzde: belirtilmemiştir. Medya: görsel (visual) Örnek: p.xq {background-color: #fffcef; background-image: uri("http://www.images.com/onyx.gif"); } Background-image özelliği tüm güncel belge çözümleyicilerce desteklenmektedir. Bu özelliğin uygulandığı bir örnek background-image.htm dosyasında incelenebilir. (IE6 SP2 'background-image' özelliğini desteklemektedir) Arka Plan Tekrarı 'background-repeat' Özelliği (IE 6.02 SP2 bu özelliği desteklemektedir) Bu özellik, bir elementin arka plan resmininin tekrar etme (duvar tuğlası oluşturma) yöntemini belirler. Duvar tuğlası oluşumu, background-image.htm örneğinde dikkatleri çekmiş olmalıdır. Burada, olayın daha sistematik şekilde ele alınışı yapılmaktadır. Duvar tuğlası, arka plan içerik (content), gezinme yolu (padding) ve sınır çizgisi (border) kutularını kapsar. Arka plan resmi tekrarı ('background-repeat') özelliği aşağıda belirtildiği gibi tanımlanmıştır: İsim:'background-repeat' Değer: repeat | repeat-x | repeat-y | no-repeat | inherit Başlangıç Değeri: repeat Uygulanabilecek Elementler:tüm elementler Kalıtım:hayır Yüzde: belirtilmemiştir. Medya:görsel (visual) Değerier, repeat Resim yatay ve düşey olarak tekrarlanır. repeat-x Resim sadece yatay olarak tekrarlanır. repeat-y Resim sadece düşey olarak tekrarlanır. no-repeat Resim tekrarlanmaz, sadece bir kopyası görüntülenir. Örnek: p.xq {background-color: #fffcef; background-image: uri("./tm_0001.jpeg"); background-repeat: no-repeat; } Background-repeat özelliği tüm güncel belge çözümleyicilerce desteklenmektedir. Bu özelliğin uygulandığı bir örnek, background-repeat.htm dosyasında incelenebilir. Bu dosyada, arka plan resim tekrarı için değişik değerlerin uygulanarak sonuçların incelenmesi yapılmalıdır. Arka plan resminin seçimi, arka plan görüntüsünde önemli rol oynar. Arka plan resminin büyüklüğü, sadece belirtildiği elementinin oluşturduğu kutu alanını kapsayacak büyüklükte ise, resim tekrarı olmaz. Eğer sadece, yatay koordinat ekseninde tekrar için yer varsa, resim yatay eksende kutu sınırına ulaşana kadar tekrar edecek şekilde görüntülenir. Örnek olarak dar ve uzun bir resim dar bir alan olan tek satırlı bir paragraf arka planını görüntülemek için kullanılırsa, üstten sadece bir kısmı görüntülecek şekilde tüm satırı kapsayacak şekilde tekrarlanır ve sonuçta çok kötü bir görüntü elde edilmiş olur. Bu konuda, önce ne istendiği iyi planlanmalı, sonra bu isteği karşılyacak şekilde bir resim oluşturmalı ve en sonra CSS adımları ile istenilen görüntüyü sağlayacak kurallar oluşturulmalıdır. İlginç bir uygulama örneği, background-repeat ve ileride incelenecek background-position özelliklerinden yararlanılarak sayfanın ortasında görüntülenecek bir resim bandı oluşturulmasıdır. Bu örneğin, program metni aşağıda, uygulaması background-position1.htm dosyasında görülebilir. p.xqf {background-color: #fffcef; background-image: uri("./tm_0001.jpeg"); background-repeat: repeat-y; background-position:center; } Gerçekten de güzel bir görüntü oluşturulabiliyor. (IE 6 .02 SP2 'background-repeat' özelliğini desteklemektedir Arka plan Eklentisi 'background-attachment' Özelliği (IE 6.02 SP2 de sınırlı olarak desteklemektedir) Bir elemente, arka plan resmi iliştirildiğinde, bu resim ya geçerli görüntü alanında sabit (fixed) veya element ile birlikte hareket eden (scroll) karakterde olabilir. Arka plan eklentisi ('background-attachment') özelliği aşağıda verildiği gibi tanımlanmıştır: İsim:'background-attachment' Değer: scroll | fixed | inherit Başlangıç Değeri: scroll Uygulanabilecek Elementler: tüm elementler Kalıtım: hayır Yüzde: belirtilmemiştir. Medya: görsel (visual) Örnek: p.xqt {background-color: #fffcef; background-image: uri("./tm_0001.jpeg"); background-repeat: repeat-y; background-attachment:fixed; } Background-attachment özelliği tüm güncel belge çözümleyicilerce desteklenmektedir. Bu özelliğin uygulandığı yukarıdaki örnek, background-attachment.htm dosyasında incelenebilir. Örnek dosyasının görüntüsü incelendiğinde, sayfanın içeriği kayabilmekte, fakat arka plan resmi sabit kalmaktadır. Eğer, arka plan resminin ilişiklik şekli, "scroll" olacak şekilde düzenlenmiş olsaydı, resim de içerikle birlikte kayabilmektedir.. Bu özelliğe verilen destek, IE için sadece   ve   elementleri ile sınırlı kalmaktadır. Bu nedenle, sayfa programcılarının bu özelliği sadece   elementi ile kullanmalarında yarar bulunmaktadır. Aslında, başta   olmak üzere     gibi elementler için çok yararlı olan bu özelliğin IE de bu derece kötü desteklenmesi, CSS3 spesifikasyonun da bu zayıf desteği kabullenmiş görünmesi hiç de hoş değildir. Örnek olarak Firefox bu özelliği en azından   düzeyinde de desteklemektedir. Fakat, IE nin geniş kullanıcı sayısı, IE de desteklenmeyen hiç bir özelliğin bugün için genel kullanımına olanak vermemektedir. (IE 6.02 SP2 'background-attachment' özelliğini sadece   ve   elementleri ile sınırlı olarak desteklemektedir) Thursday, October 6, 2005 20:09