Mengatur Ukuran Gambar dengan Background-size

Memiliki gambar yang menarik untuk dipajang pada website kita tentu akan sangat menarik. Selain akan mempercantik website kita, juga bisa menjadi daya tarik untuk pengunjung berselancar diwebsite kita. Ada banyak sekali cara untuk menampilkan gambar pada website. Caranya bisa lewat perintah HTML maupun CSS. Untuk mengatur ukuran gambar pun kita bisa menggunakan perintah HTML atau CSS. Sehingga kita tidak perlu repot membuka aplikasi untuk merubah ukuran gambar.

Sesuai dengan Pembahasan kita kali ini, kita akan mempelajari bagaimana cara mengatur ukuran gambar dengan background-size. Background-size adalah perintah untuk merubaha ukuran gambar. Gambar yang akan dirubah bukan gambar yang kita munculkan dengan tag HTML <img>, melainkan dengan perintah CSS yaitu background-image. Untuk lebih detail mengenai perintah ini, ada baiknya kita mulai praktekkan langsung. Pertama kalian buat terlebih dahulu tampilan HTMLnya. Untuk mempersingkat waktu kalian bisa salin contoh code berikut ini.

gambar.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Background Size pada CSS</title>
	
</head>
<body>
	<div class="container">
		<div>
			<h1>Ini adalah gambar 1</h1>
			<img src="batman.png" alt="">
		</div>
		<br>
		<hr>
		<br>
		<div class="gambar">
			<h1>Ini adalah gambar 2</h1>
		</div>
	</div>
</body>
</html>

Simpan file tersebut dengan format .html . Untuk melihat hasilnya kalian cukup membuka file tersebut pada browser kesayangan kalian. Jika berhasil maka tampilanya akan muncul seperti berikut ini.

mengatur-ukuran-gambar-dengan-background-size-rangga1-180917

Pada gambar diatas terdapat dua buah cara menampilkan gambar. Pada bagian pertama memunculkan gambar dengan HTML. Ukuran gambar tersebut sesuai dengan gambar aslinya. Jika ingin merubah ukuranya kalian cukup tambahkan atribut width pada gambar dan tuliskan nominalnya.

Sekarang pada contoh bagian kedua adalah menampilkan gambar dengan CSS. Gambar tersebut terbilang lebih kecil karena memang sudah kita rubah ukuran gambarnya. Perintahnya bisa kalian lihat pada script CSSnya. Dengan menggunakan background-size, kalian dapat merubah ukuran gambarnya dengan catatan gambar yang diubah adalah gambar yang kita tampilkan menggunakan CSS.

Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara mengatur ukuran gambar dengan background-size. Semoga artikel kali ini bermanfaat dan dapat menginspirasi kalian semua. Sampai jumpa pada artikel selanjutnya.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *