Images

Kategori: CSS , 29 Ekim 2019 , JanFranco


Bu yazımda CSS ile resimleri kontrol edeceğiz. İlk olarak tabi ki resimlerin boyutunu değiştirelim. Bunu width ve height özellikleri ile yapabiliriz:


img.large {
	width: 500px;
	height: 500px;
}
img.medium {
	width: 250px;
	height: 250px;
}
img.small {
	width: 100px;
	height: 100px;
}
Sayfalara background-image özelliği ile arkaplan ekleyebiliriz:


body {
	background-image: url("images/pattern.gif");
}
background-repeat özelliği ile x ve y eksenlerinde arkaplan resmini tekrar ettirebiliriz. Örneğin 1000x100 boyutlu bir arkaplan deseninin repeat-y değeri ile tüm web sayfamızın arkaplanını kaplamasını sağlayabiliriz. background-repeat özelliği repeat, repeat-x, repeat-y, no-repeat değerlerini alabilir:


body {
	background-image: url("images/header.gif");
	background-repeat: repeat-x;
}
background-attachment özelliği ile arkaplan resimlerinin sabit durması gerektiğini veya scroll ile değişmesi gerektiğini bildirebiliriz. background-attachment özelliği fixed ve scroll değerlerini alabilir:


body {
	background-image: url("images/tulip.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
}
Belirlediğimiz arkaplan resmi tekrar etmeyecekse, sayfada nerede duracağını background-position özelliği ile belirleyebiliriz. Bu özellik left top, left center, left bottom, center top, center center, center bottom, right top, right center ve right bottom değerlerini alabilir. Bu değerler yerine pisek veya oran değerleri de verebiliriz:


body {
	background-image: url("images/tulip.gif");
	background-repeat: no-repeat;
	background-position: center top;
}
CSS3 ile gelen bir özellik ile background-image özelliğini kullanarak gradient oluşturabiliriz:


#grad {
	background-image: linear-gradient(red, yellow);
}
css-images

Bu şekilde yön belirtmeden kullanırsak yukarıdan aşağı tanımlanırlar. Yön belirterek de kullanabiliriz:


#grad {
	background-image: linear-gradient(to bottom right, red, yellow);
}
css-images


Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın