Assalamualaikum
Belajar CSS Mengubah Background Dengan CSS
Background atau latar belakang pada sebuah halaman website merupakan salah satubagian yang wajib di design untuk menghasilkan sebuah halaman website yang terlihat menarik dan modern. ada beberapa cara mempercantik background atau latar belakang website. bisa mempercantik background website dengan menggunakan gambar. jika tidak ingin menggunakan gambar bisa juga dengan mengubah warna background dengan bantuan CSS. untuk mengubah background dengan CSS gunakan property background pada CSS. property background selain di
gunakan untuk mengubah background body website bisa juga di gunakan untuk mengubah gambar
background pada sebuah elemen HTML yang di inginkan.
Cara mengubah background dengan CSS
pada tutorial belajar CSS mengubah background dengan css ini akan di jelaskan bagaimana cara mengubah background dengan menggunakan CSS. langsung saja masuk ke cara mengubah background menggunakan CSS.Tahapan
buat sebuah file html dengan nama file dengan nama index.html.kemudian buat sebuah file css dengan namanya juga dengan nama style.css
kita akan menggunakan penulisan dengan gaya external
href="../style.css"Mengubah warna background dengan CSS
File index.html yang sudah kita buatindex.html
<!DOCTYPE html>
<html lang="en">
<head>">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Merubah Warna Background Dengan CSS</h1>
</body>
</html>
body{
background-color: sandybrown;
color:#fff;
}
sandybrown dan warna color font dengan warna white #fff.
Hasilya Seperti gambar di bawah ini
Bagaimana Kalau Mau mengubah warna background dengan gambar
Pertama kita harus menyiapkan gambar yang mau di jadikan background dan kita modif sedikit code di css kitaBerikut code css yang kita modif style.css
body{
background-image:url("css.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
Sekian lah tutorial dasar tentang belajar merubah background warna dan gambar.
Silahkan Dicoba dan Semoga Bermanfaat
Tidak ada komentar:
Tulis komentar