HTML/CSS fon,arkaplan(background) kodu kullanımı örneği (HTML/CSS background code usage example)

HTML de arkaplan, fon belirleyip yönetmek için gerekli olan özellik “background” dır.

Aşağıda background özelliğinin çeşitlerine ait örnekleri görebilirsiniz.

Arkaplana,fona(background) renk özelliği “background-color” ile yönetebilirsiniz.

<div style="background-color: red;"></div>

“background-color” ın alabileceği değerler şunlardır.

  • “{renk değeri}”: CSS de geçerli renk kodlarını girebilirsiniz. Listesine buradan ulaşabilirsiniz.
  • “transparent”: arkaplan rengi şeffaf olur. Varsayılan değerdir.
  • “inherit”: alt elementi olduğu elementin özelliğini kazanır.

Arkaplanda,fonda(background) resim göstermek için “background-image” kullanabilirsiniz.

<div style="background-image: url(images/backgroundImage.jpeg);"></div>
<div style="background-image: url(http://yazilimcity.net/wp-content/uploads/2013/07/istanbul01.jpg);"></div>

“background-image” in alabileceği değerler şunlardır.

  • “{uri değeri}”: yani URL yada dizininizden bir yol gösterebilirisiniz.
  • “none”: resim gösterilmez. Varsayılan değerdir.
  • “inherit”: alt elementi olduğu elementin özelliğini kazanır.

Arkaplanda,fonda(background) gösterilen resmin tekrar etme durumunu “background-repeat” ile yönetebilirsiniz.

<div style="background-repeat: repeat-y;"></div>

“background-repeat” in alabileceği değerler şunlardır.

  • “repeat”: Yatay ve Dikey olarak tekrarlanır.
  • “repeat-x”: Yatay olarak tekrarlanır.
  • “repeat-y”: Dikey olarak tekrarlanır.
  • “no-repeat”: Tekrarlanmaz, tek çizim gerçekleşir.Arkaplan resmini sabitlemek için kullanılır.Arkaplan sabit kalır sayfa uzun ise aşağıya doğru gidildikçe arkaplan yazı ile birlikte tabiri caiz ise yazı ile birlikte aşağıya doğru akmaz.
  • “inherit”: alt elementi olduğu elementin özelliğini kazanır.
<html>
<body style="background-attachment: scroll;">
</body>
</html>

“background-attachment” ın alabileceği değerler şunlardır.

<html>
<body style="background-position: center;">
</body>
</html>

“background-position” ın alabileceği değerler şunlardır.

Arkaplanda,fonda(background) boyama alanını “background-clip” ile yönetebilirsiniz.

<html>
<body style="background-clip: content-box;">
</body>
</html>

“background-clip” ın alabileceği değerler şunlardır.

<html>
<body style="background-origin: ;">
</body>
</html>

“background-origin” ın alabileceği değerler şunlardır.

<html>
<body style="background-size: ;">
</body>
</html>

“background-origin” ın alabileceği değerler şunlardır.

<html>
<body style="background: ;">
</body>
</html>

“background” ın alabileceği değerler şunlardır.

Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

Leave a Reply


*