Artalan (Background) Biçimlendirme

Artalan (Background) Biçimlendirme, Artalan Rengi, Background-Color, Background, Artalan Resmi, Background-image, Artalan resim yenileme, Background-repeat, Web Tasarım Dersleri Background Biçimlendirme, Web Tasarım Dersleri Resim Background, web tasarım dersleri, web tasarım öğreniyorum gibi sorgular yazarak web sitemize ulaşan değerli ziyaretçimiz bugünkü konumuz Artalan Biçimlendirme yani background biçimlendirme konusu.

Artalan özelliklerini (artalan rengi, artalan resmi… vb) biçimlendirmek için kullanılır.

Artalan Rengi (Background – Color)

Öğelerin artalanlarına renk atamak için kullanılır. Değer olarak istediğimiz rengi ayrıca da transparent değerini atayabilirsiniz.

<head>

<style type=”text/css”>

p.artalan {background-color: #C0C0C0;}

</style>

</head>

<body>

<p class=”artalan”> Bu paragrafa artalan rengi olarak #C0C0C0 hex renk kodu ile GRİ renk uyguladık </p>

<p> bu paragrafa ise herhangi bir artalan rengi uygulanmamıştır. </body>

ARTALAN RESMİ (BACKGROUND-IMAGE)

Artalana resim atamak için kullanılır.

mountain-range-on-black-background

<head>

<style type=”text/css”>

body {background-image:url(‘artalan.jpg’);}

</style>

</head>

<body>

<p> Artalan olarak bir resim kullandık. </p>

</body>

Artalan Resim Yenileme (Background-Repeat)

Artalan resminin yenileme ayarlamaları için kullanılır. Bu özelliği kullanmadığımızda artalan resmi hem yatay hem de dikey olarak tekrarlar ve tüm artalanı kaplar işte bu özellikle bu standart kullanımdan farklı biçimlendirmeler yapılabilmektedir.

Aldığı Değerler

repeat: Resim hem yatay hem de dikey olarak yenilenir

repeat-x: Resim yalnız yatay düzlemde yinelenir.

repeat-y: Resim yalnız dikey düzlemde yenilenir

no-repeat: Resim yenilenmez.

 

<head>

<style type=”text/css”>

{

background-image:url(‘artalan.jpg’);

}

</style>

</head>

<body>

<p> Artalan resmini sadece yatay düzlemde tekrar edecek şekilde kullandık. </p> </body>

Artalan Resmini Konumlandırma (Background-position)

Artalan resminin konumunu belirlemek için kullanılır.

Aldığı Değerler

Yatay hizalama için: left, center, right

Dikey hizalama için: top, center, bottom

Bu değerler top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right şeklinde birlikte de kullanılabilir.

Bu değerlerin yerine yüzde (%) olarak da değer belirtilebilir. Varsayılan değer 0% 0%  olmaktadır. Bu kullanım top left şeklindeki kullanıma karşılık gelmektedir. 100% 100% değeri ise bottom right değerine karşılık gelir. Hem yatay hem dikey olarak ortalamak için kullanacağınız değer 50 % 50% değeridir. Bu da center center kullanımına karşılık gelecektir.

Gerek top left şeklindeki kullanımda olsun gerekse 0% 0% şeklindeki kullanımda olsun ilk değer yatay hizalama ikinci değer ise dikey hizalama içindir. Eğer atamanızda sadece tek bir değer kullanırsanız ikinci değer varsayılan olarak center değeri olacaktır.

<head>

<style type=”text/css”>

body

{

background-image:url (‘artalan.jpg’);

background-repeat:no-repeat;

background-position:center;

}

</style>

</head>

<body>

<p> Artalan resmini ortalı şekilde kullandık. </p>

</body>

Artalan (Background)

Buraya kadar anlattığımız artalan özelliklerini bir arada kullanabilmemize olanak tanır. Bu özellikle beraber; background-color, background-image, background-repeat, backgroundattacment, background-position değerleri kullanılır.

<head>

<style type=”text/css”>

body { background: #00ff00 url(‘artalan.jpg’) no-repeat fixed center;}

</style>

</head>

<body>

<p> Tüm artalan özelliklerini bir arada kullandık. </p>

</body>

Facebook Sayfamız

İnstagram Sayfamız

Web Tasarım Sayfamız

İletişim Sayfamız

Artalan (Background) Biçimlendirme
Bu yazıya oy ver

By | 2017-07-20T22:02:52+00:00 Kasım 30th, 2016|Categories: BLOG, Kategoriler, Web Tasarım Dersleri|Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , |0 Comments

About the Author:

 
%d blogcu bunu beğendi:
EV SSL