19 Nisan 2013

Css Backgrund-image:

Css ile herhangi bir nesnenin arka planına resim eklemek için background: özelliğini kullandığımız gibi aynı şekilde background-image: özelliğini de kullanabiliriz..Arka plan örneği için <div> tagını kullandım. Aynı şekilde dileğimiz elemente uygulamamız mümkündür.

Background-image: Kullanımı:

<style>
#arkaplan{
background-image:url(https://img.webme.com/pic/d/deneke/deneke_pre.gif);
}
</style>

<div id="arkaplan">Burası div içeriğiniz.</div>

Arkaplan Örneği:

Arkaplana resim ekledik ve arkaplanda "repeat (tekrar)" halinde yayılmasını sağladık.Not: url('resminadresi.gif') gibi denden kullandığınız taktirde bazı tarayıcıların kabul etmediğini unutmaynız.

Not: Yukardaki div örneğinin içerisinde <p> (paragraf) tagı da kullanlımıştır. Yazıların soldan içeri taşınması için de (padding-left:) özelliği kullanılmıştır.Sitenizde kullanırken neden aynı görüntüyü alamadık diye yakınmayın sonra. Kodu olduğu gibi kopyalayıp kullanırsanız eğer, aşağıdaki örnek gibi bir görünüm elde edersiniz.

Arkaplan Örneği 2:

Yine arkaplana resim eklememizi ve resmin "repeat" halinde yayılmasını sağlar. Yukardaki örnekten tek farkı, hiç birşey aynı görevi görür yani.