HTML ve CSS ile Arkaplan Resmi Ekleme ve Boyutlandırma
Bir web sayfasına arkaplan resmi eklemek, görsel ilgi çekicilik katmanın ve sitenizin genel estetiğini geliştirmenin harika bir yoludur. HTML ve CSS kullanarak arkaplan resimlerini kolayca ekleyebilir ve boyutlandırabilirsiniz.
HTML ile Arkaplan Resmi Ekleme
Arkaplan resmini bir HTML sayfasına eklemek için style özelliğini kullanabilirsiniz. style özelliği, bir HTML öğesinin CSS stillerini belirlemenize olanak tanır.
“`html
“`
Yukarıdaki kod, `body` öğesine `resim.jpg` adlı bir arkaplan resmi ekler.
### CSS ile Arkaplan Resmi Boyutlandırma
Arkaplan resminin boyutunu CSS kullanarak kontrol edebilirsiniz. `background-size` özelliği, arkaplan resminin boyutunu belirlemenize olanak tanır.
**Arkaplan Resmini Kapsayacak Şekilde Boyutlandırma**
Arkaplan resmini kapsayacak şekilde boyutlandırmak için `background-size: cover;` kullanın. Bu, resmin kapsayıcı öğenin tüm alanını dolduracağı anlamına gelir.
“`css
body {
background-image: url(‘resim.jpg’);
background-size: cover;
}
“`
**Arkaplan Resmini İçerecek Şekilde Boyutlandırma**
Arkaplan resmini içerecek şekilde boyutlandırmak için `background-size: contain;` kullanın. Bu, resmin kapsayıcı öğenin tüm alanına sığacak şekilde boyutlandırılacağı anlamına gelir.
“`css
body {
background-image: url(‘resim.jpg’);
background-size: contain;
}
“`
**Arkaplan Resmini Belirli Bir Boyuta Boyutlandırma**
Arkaplan resmini belirli bir boyuta boyutlandırmak için `background-size: width height;` kullanın. `width` ve `height` değerleri, resmin piksel cinsinden genişliğini ve yüksekliğini belirtir.
“`css
body {
background-image: url(‘resim.jpg’);
background-size: 1000px 500px;
}
“`
### Faydalı Siteler ve Dosyalar
* [CSS Backgrounds](https://www.w3schools.com/css/css_background.asp)
* [Background Size Property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
* [CSS Background Image Generator](https://www.cssmatic.com/background-generator)
### Sonuç
HTML ve CSS kullanarak arkaplan resimlerini eklemek ve boyutlandırmak, web sayfalarınıza görsel ilgi çekicilik katmanın ve genel estetiklerini geliştirmenin kolay bir yoludur. `style` ve `background-size` özelliklerini kullanarak, arkaplan resimlerini kapsayacak, içerecek veya belirli bir boyuta boyutlandıracak şekilde özelleştirebilirsiniz.