CSS ARKAPLAN (Background) RESiM ÖZELLİKLERİ

background-image özelliği ve ögelerine istediğimiz zemin resmi eklemek ve konumlandırmak için kullanılırız. Örnek olarak "zemin.jpg" isimli görselimizi zemin resmi olarak sayfamıza eklemek için aşağıdaki stil şablonu kodunu uygulamalıyız.


  body {background-image:url(zemin.jpg);} 

ÇIKTI:

css zemin

ZEMİN RESMİ TEKRARI


background-repeat özelliği zemine eklenen görselin tekrarlanma biçimini kontrol etmek için kullanılır. Dört ayrı değer alır:

ÖRNEK 1:


body{background-image:url(logo.png); 
     background-repeat : repeat; 
     }
 

ÇIKTI:

css zemin

ÖRNEK 2:


body{background-image:url(logo.png); 

     background-repeat :no-repeat;
 
     } 

ÇIKTI:

css zemin

ÖRNEK 3:


body{background-image:url(logo.png); 

     background-repeat :repeat-x; 
     }
 

ÇIKTI:

css zemin

ÖRNEK 4:


body{background-image:url(logo.png); 

     background-repeat :repeat-y; 

     } 

ÇIKTI:

css zemin

ZEMİN RESMİ POZİSYONU


"background-position" özelliği görselin sayfadaki pozisyonunu belirler. Dikey hizalamada üst (top), orta (center) ve alt (bottom) geçerli bir pozisyonken; yatay hizalamada sol (left), orta (center) ve sağ (right) geçerlidir. Bu özellik için 11 ayrı değer bulunmaktadır.

Örnek olarak bir ağaç resmini merkez sağa yerleştirelim:


body {width:100%; height:650px;

      background-image: url(agac.jpg);
 
      background-repeat : no-repeat; 

      background-position:center right;
      }
 

ÇIKTI:

css zemin

Şimdide ikinci örnek olarak ağaç resmini alt merkeze yerleştirelim:


body {width:100%; height:650px;

      background-image: url(agac.jpg);
 
      background-repeat : no-repeat; 

      background-position:bottom center;
       }
 

ÇIKTI:

css zemin

"background" özelliklerini kısaltma uygulayarak şöyle de yazabilirdik:


body{ background:url(logo.gif) no-repeat top center;}

Birkaç örnek daha yapalım:


 body{ background: url(logo.gif) no-repeat bottom right;}
 
 body{ background: url(logo.gif) no-repeat 60% 75%;}
 
 body{ background: url(logo.gif) no-repeat 100px 200px;} 

background-attachment özelliği


Zemine eklenen resim sayfa ile beraber kaymasını veya sayfanın zeminine sabit kalmasını sağlar.

  1. scroll: Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.

  2. fixed: Sayfa hareket ettirildiğinde zeminin sabit kalmasını sağlar.

Hiçbir Şey yazılmadığında default(Geçerli) değer; scroll'dur



body {background-image: url(logo.gif);
 
      background-repeat : no-repeat; 

      background-attachment: fixed } 


Nergiz demirsaplı 14/12/2018

Ben web sitemi kurdum arkaplan rengi eklemeyi unutmuştum simdi ekliyorum olmuyor, sebebi nedir.

yönetici 14/12/2018

Nergiz, css ile background renk ayarlama

body {
      background-color: lightblue;
     }

Websitenin, arkaplan görünen yere mouse ile gel sol tıkla öğeyi inceleye tıkla burdan incele bir öğeden miras alıyor olabilir, bazı düzeltmeler yaparak deneyebilirsin. Olmasa html inline tanımla daha geçerli bir tanımlamadır.

<body style="background-color: lightblue;">

Gül 25/04/2019

Çok teşekkürler çok güzel anlatmışsınız. ben background image'i yerleştirdim üzerine yazı eklemek istiyorum yazıyı ekleyebildim ancak ortalayamıyorum bir türlü, text-align center özelliğini kullandım ortaya geldi ancak sağında biraz daha fazla boşluk var, bir türlü tam ortalanmıyor, ne yapabilrim lütfen yardımcı olur musunuz

yönetici 26/04/2019

text-align center'dan sonra margin-left:20px veya margin-right:20px değeri değiştirerek dene.

Gül 27/04/2019

Cevabınız için gerçekten ne kadar teşekkür etsem az kalır ???? bir sorum daha var(çok yeniyim de????) bir sayfamda background-image tekrar etsin istiyorum, css'de resmi ekledim width-height degerlerini girdiğim zaman resim görünüyor ve backround-repeat:repeat diyorum tekrar etmiyor, w-h değerlerini silip repeat kalınca bu defa resim siliniyor, ne yapacağım ben ???? şimdiden çok teşekkürler...

yönetici 27/04/2019

Gül, Yukarda bazen doğru bazen yanlış yazmışın backround-repeat:repeat , background derken G harfini unutmuşun buna dikkat et, çalışmazsa sitelerden kodu kopyala yapıştırla dene yine olmazsa bazen tarayıcı önbellek sorun çıkarabilir. Önbelleği geçmek için shift+f5 tuşlarına basarak dene.

Volkan Sabah 20/03/2020

Çok teşekkürler inanılmaz anlatım. Reklamlarınıza tıkladım :)

Mücahit 07/04/2020

Merhaba öncelikle anlatımız çok güzel,çok faydalı oldu teşekkürler ama ben background-image:url(...png); komutunu yazdığımda resim tüm sayfayı kaplayacak şekilde büyük oluyor ve tekrarlamama komutunu yazmadığımda sadece sayfada 2 tane aynı resimden gözüküyor. Resimi nasıl küçülteceğim bana yardım edebilir misiiniz.

yönetici 08/04/2020

Mücahit, Yukardaki ağaç resmini, ekleme bölümünü iyi incele, resmin genişlik ve yükseklik değerleri verilmiş.

Melih 02/12/2020

Ben arka planımı eklediğim zaman tekrarlamama komutunuda ekledim ve sayfanın ortasına aldım resmi ama resim tüm sayfayı kaplamıyor nasıl yapabilirim

yönetici 04/12/2020

Melih, widht ve height değeri vererek resmi büyütebilirsin, resim kalitesi bozulabilir. Gimp veya photoshop proğramla resmi büyütebilirsin.

Huzeyfe Bozdoğan 16/01/2021

Ben logo eklediğim zaman birde sayfaya arkaplan eklemek istyorum aynıanda nasıl yapabilirim?

yönetici 17/01/2021

Huzeyfe, Arkaplanı ekledikten sonra. sayfaya logo eklemen için normal resim etiketi kullanacaksın.

havva kanca 28/02/2021

Hocam selamlar login sayfası yapıyorum arkaplanım beyaz kalacak; Ama ekstra bir arkaplan daha yapmam gerekiyor kağıt üstüne kağıt koymam gerekiyormuş gibi nasıl yapacağım

yönetici 02/03/2021

CSS z-index nedir? konusuna bak.

veysel 13/06/2021

Bu eklediğimiz arka plan resmine link nasıl eklenir. yani demek istediğim arka plan resmine tıkladığımızda belirlediğimiz bir link açılsın istiyorum. bunu yapabiliyormuyuz.

yönetici 16/06/2021

Veysel, body etiketinden sonra Tüm siteyi kaplayan bir div yaparsan bu div etiketinide arka plan olarak kullanacaksın. Bu div etiketinide link etiketi ile sarmmalarsan olur.

Ali akbas 12/07/2021

Öncelikler saygilar, hocam her yolu denedim site site gezdim tekrarlar yaptım olmuyor. siteden kopyala yapıstır yapıyorum başka resim linklerini yapıştırıyorum oluyor fakat kendi masaÜstümden hiçbir şekilde resmi koyamıyorum. lutfen yardim teşekkur ederim.

yönetici 13/07/2021

Ali, Boş bir html sayafası aç Resim eklemeyi dene oluyormu. resim yolu ve Resim ismi önemli. .jpg .jpeg formatına dikkat et. Linux işletim sistemi kullanıyorsan dosya izinlerdende çalışmaz.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

1363

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • HTML RESİM EKLEME
  • HTML DİV ve SPAN NEDİR?
  • CSS YATAY MENÜ YAPIMI
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.