CSS Resim Ekleme Ve Düzenleme (6. Ders Css İle Resimleri Düzenleme) | BilgeBank
Cumartesi , Ekim 21 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / CSS Dersleri / CSS Resim Ekleme Ve Düzenleme (6. Ders Css İle Resimleri Düzenleme)

CSS Resim Ekleme Ve Düzenleme (6. Ders Css İle Resimleri Düzenleme)

Css ile sayfamıza resimler ekleyerek ve düzenlemeler yaparak çeşitli görsel tasarımlar yaparız. Css ile resim eklemek için background-image: url(“resimler/resimadı.jpg“) ; kodunu ekleyerek sayfamıza resmimizi tanıtabiliriz. Ancak resimlerin boyutları veya tarayıcı farklılıklarından oluşacak hatalardan dolayı birkaç tanımlama ve özellikler vermemiz gerekir.

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

Hemen örneğimize geçerek genel çalışma alanımızı yani body alanımıza birkaç kodla  arka planı resmi ekleyelim.

Bu kodlarla Css imize profesyonelce hazırlanmış bir arka planı eklemiş olduk. Ancak daha farklı resimler eklediğimizde arka plandaki görüntünün nasıl bozulduğunu göreceksiniz. Örnek olarak resmi tanıttığımız background-image: url(“http://www.bilgebank.com/wp-content/uploads/2017/02/400×400.jpg“) alandaki url adresini http://www.bilgebank.com/wp-content/uploads/2017/02/bayrak.png adresi olarak değiştirin farkı göreceksiniz. Resim 400×400 boyutlarında olsa da tekrarlayarak kötü bir görüntü oluşturmakta bunu önlemek için çeşitli komutlarla düzenlemeler yapacağız şimdi.

 

Head etiketleri arasına genel çalışma alanlarımızı yerleştirelim ve css  alanlarımızdaki çalışmalarımıza başlayalım. background-image: url(“http://www.bilgebank.com/wp-content/uploads/2017/02/bayrak.png”); komutunu verdiğimizde resim alan içerisinde tekrarlamaya devam edecektir. Buna birkaç komut ekleyerek alanımıza düzgün bir şekilde yerleştirelim şimdi.

.bayrak1{ Head etiketlerindeki bayrak1 clasımızı tanıtarak bu alanda işlem yapacağımızı css alanımızda tanımladık ve şu komutları uygulamasını istedik:

background-image: url(“http://www.bilgebank.com/wp-content/uploads/2017/02/bayrak.png”); Komutumuz ile sayfamıza 400×400 boyutlarında bir bayrak resmi tanımladık ancak resim ufak olduğu için sade bu komutları verdiğimizde resim 2 3 sefer tekrarlayacaktır. Bizim isteğimiz tek bir resim olması ve alan boyunca yayılmasıdır. Bunun için aşağıdaki komutları vereceğiz.

margin:10px 0px 10px 0px; Komutumuz ile bayrak1 alanımızın yukarıdan ve aşağıdan 10px boşlukla başlamasını istedik aradaki boşluğu oluşturmuş olduk.

height:250px; Komutumuz ile resme bir yükseklik belirledik, bu sayede resmimizin yüksekliğini belirlediğimiz için genişlik belirlememize gerek yok, tumalan da vermiş olduğumuz 1024px genişliğini otomatik olarak tanımladı.

background-repeat: no-repeat; Resimler varsayılan olarak tekrarlanır no-repeat komutumuz ile resmin tekrarlanmamasını istedik resim 1 tane gözükecektir.

background-position: center; Komutumuz ile resmin ortalanmasını istedik.

background-size:100% 100%; Komutumuz ile resmimizin yüksekliğinin ve genişliğinin otomatik olarak yayılmasını istedik.

} Not: Bu özellikler çeşitli tarayıcılarda değişiklik gösterebilir bunun için bazı tanımlamalar yapılır bunu ilerleyen derslerde örneklerle açıklayacağız.

.bayrak1{ Head etiketlerindeki bayrak2 clasımızı tanıtarak bu alanda işlem yapacağımızı css alanımızda tanımladık ve şu komutları uygulamasını istedik.

background-image: url(“http://www.bilgebank.com/wp-content/uploads/2017/02/1600x1000bayrak.jpg”); Komutumuz ile sayfamıza 1600×1000 boyutlarında bir bayrak resmi tanımladık ancak resim büyük olduğu için sade bu komutları verdiğimizde resim alandan büyük olduğu için resim tek görünecek ancak tam şekli görünmeyecektir bizim isteğimiz resim alan boyunca yayılmasıdır bunun için aşağıdaki komutları vereceğiz.

height:500px;  Komutumuz ile resme bir yükseklik belirledik bu sayede resmimizin yüksekliğini belirledik genişlik belirlememize gerek yok tumalan da vermiş olduğumuz 1024px genişliğini otomatik olarak tanımladı.

background-repeat:no-repeat; Resimler varsayılan olarak tekrarlanır no-repeat komutumuz ile resmin tekrarlanmamasını istedik resim 1 tane gözükecektir.

background-size:100% 100%; Komutumuz ile resmimizin yüksekliğinin ve genişliğinin otomatik olarak yayılmasını istedik bu sayede büyük olan resmimiz alanımıza sığdırılmış olduk.

} Not: Bu özellikler çeşitli tarayıcılarda değişiklik gösterebilir bunun için bazı tanımlamalar yapılır. Bunu ilerleyen derslerde örneklerle açıklayacağız.

Gelişmiş resim düzenlemelerini ilerleyen derslerde özellikle html5 ve css3 derslerimizde işleyeceğiz.

 

Hakkında BilgeBank

İlgili Makale

html menü

CSS İle Açılır Menü Yapımı (12. Ders Açılır Menü)

Css ile açılır menü yapımını adım adım resimli bir şekilde nasıl yapıldığını anlatmaya çalışacağım olayın  mantığını …

Bir Cevap Yazın