Cara mengubah background di HTML

Okay di tutorial kali ini mari kita belajar html untuk mengganti background atau latar belakang, Ada beberapa cara mengganti background di HTML dengan mudah bisa lewat atribut elemen di tag HTML atau dengan CSS menggunakan properti background-color atau background-image, berikut ini caranya:

Mengganti background menggunakan atribut di HTML

Dengan cara ini kita bisa mengganti background di HTML tanpa CSS, tetapi kekurangannya dengan atribut bgcolor kita hanya bisa menggunakan untuk keperluan mengganti dan menambah kan background dengan warna saja tidak bisa untuk gambar dan hanya tag body, marquee, table, tbody, td, tboot, th, thead, tr, col dan group.

Background atau latar belakang pada sebuah halaman website merupakan salah satu bagian 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. buat sebuah file html dengan nama file html nya terserah anda. di sini saya membuat nya dengan nama index.html. kemudian buat sebuah file css dengan namanya juga terserah anda tapi di sini saya membuat file css dengan nama style.css.

Mengubah warna background dengan CSS

Perhatikan penjelasan berikut ini untuk cara mengubah warna background dengan menggunakan CSS.

index.html

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<head>

<title>Merubah warna background dengan CSS</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<h1>Tutorial mengubah warna background dengan CSS</h1>

 

</body>

</html>

style.css

1

2

3

4

body{

background: blue;

color: white;

}

Cara mengubah background di HTML

cara merubah warna dengan css

pada syntax css kita menentukan body yang akan di modifikasi kemudian memberikan property background dengan value blue (biru) dan warna color font dengan warna white (putih).

Mengubah gambar background dengan CSS

Pada sub judul mengubah gambar background dengan css ini akan di jelaskan bagaimana cara mengubah background sebuah halaman website dengan menggunakan gambar. oleh sebab itu anda harus menyediakan sebuah file gambar untuk dijadikan background untuk halaman website anda. di sini saya sudah menyediakan sebuah gambar sederhana yang akan saya jadikan gambar pada background. letakkan file gambar satu folder dengan file html dan css agar tidak kebingungan nantinya. nama file gambar saya adalah malasngoding.png

Cara mengubah background di HTML

cara membuat background gambar dengan css

index.html

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<head>

<title>Membuat background dengan gambar</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<h1>Membuat background gambar dengan CSS</h1>

 

</body>

</html>

style.css

1

2

3

4

body{

background: url('malasngoding.png');

color: #fff;

}

perhatikan pada syntax css di atas. untuk membuat gambar background gunakan syntax

1

background: url('malasngoding.png');

Cara mengubah background di HTML

tutorial cara merubah background gambar dengan css

Gambar pun berhasil di pasang sebagai background halaman. sekian tutorial belajar dasar CSS mengubah background dengan CSS.

 

Incoming search terms:

  • membuat background html dengan css
  • background warna biru
  • cara mengganti background di css
  • cara merubah warna background bootstrap
  • mengganti background bootstrap
  • cara mengganti background css
  • cara mengganti background bootstrap
  • cara membuat background image di css
  • https://www malasngoding com/belajar-css-mengubah-background-dengan-css/
  • cara mengganti warna background di css


  • SHARE :

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

  • Author's profile
  • All posts by Diki Alfarabi Hadi

Tags: background gambar dengan css, Belajar CSS Mengubah Background Dengan CSS, cara design background dengan css, cara memasang gambar di background website, cara memasang gambar di website, cara membuat background gambar dengan css, Cara mengubah background dengan CSS, cara merubah gambar dengan css, mempercantik background website dengan gamabr, mengubah gambar dengan css, pengertian css, tutorial belajar dasar CSS mengubah background dengan CSS

Tutorial CSS Dasar

  • #1. Pengenalan CSS
  • #2. Penulisan CSS
  • #3. Background CSS
  • #4. Margin dan Padding CSS
  • #5. Font CSS
  • #6. Link / Hyperlink CSS
  • #7. Format Text CSS
  • #8. Position CSS
  • #9. Border CSS
  • #10. List CSS
  • #11. Float CSS
  • #12. Tutorial CSS Lainnya

Tutorial CSS3 Dasar

  • #1. Pengenalan CSS3
  • #2. Rounded Corner CSS3
  • #3. Warna Gradient CSS3
  • #4. Efek Bayangan CSS3
  • #5. Transform CSS3
  • #6. Transition CSS3
  • #7. Animasi CSS3
  • #8. Tutorial CSS3 Lainnya

Produk

  • Cara mengubah background di HTML
    Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
  • Cara mengubah background di HTML
    Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
  • Cara mengubah background di HTML
    Source Code Toko Sport PHP dan MySQLi Rp 200,000
  • Cara mengubah background di HTML
    Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000

Tutorial Terbaru

  • Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
  • Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
  • Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
  • Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
  • Membuat QR Code Dengan PHP August 3, 2022

Toko Kami

Cara mengubah background di HTML
Cara mengubah background di HTML
Cara mengubah background di HTML

SOCIAL

Malas Ngoding

TUTORIAL MENARIK LAINNYA

Cara mengubah background di HTML

CSS

Membuat Bentuk Segitiga Dengan CSS

7 July 2020

Membuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang ...

Diki Alfarabi Hadi

Cara mengubah background di HTML

CSS

Membuat Lingkaran Dengan CSS

25 September 2018

Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ...

Diki Alfarabi Hadi

Cara mengubah background di HTML

CSS - Web Design

Membuat Template Web Responsive Dengan HTML dan CSS

10 May 2017

Membuat Template Web Responsive Dengan HTML dan CSS – Pada tutorial ini kita akan membuat sebuah template web sederhana responsive dengan menggunakan HTML dan CSS. ...

Diki Alfarabi Hadi

Cara mengubah background di HTML

CSS

Cara Membuat Text Di Tengah Dengan HTML dan CSS – Sebenarnya cara membuat text berada di tengah sudah pernah kita jelaskan di tutorial CSS dasar ... Apa HTML yang benar untuk inserting background

Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.

Bagaimana cara mengganti warna latar belakang?

Menambahkan atau mengubah warna latar belakang.
Masuk ke Tata Letak > Warna Halaman..
Lakukan salah satu hal berikut: Pilih dari Warna Tema atau Warna Standar. Pilih Warna Lainnya lalu pilih sebuah warna. Pilih Efek Isian untuk menambahkan efek khusus, seperti gradien, pola, atau tekstur..

Apa itu background pada CSS?

CSS background-image digunakan untuk mengatur gambar latar belakang sebuah elemen HTML. Secara default, background gambar akan diulang (repeat) sehingga memenuhi seluruh elemen. Untuk cara penggunaanya silahkan ikuti contoh di bawah ini. Namun sebelumnya siapkan gambar yang akan dijadikan sebagai latar belakang.

Tag apa yang perlu di gunakan untuk background website?

Untuk menambahkan background di html maka perlu menggunakan style CSS (Cascading Style Sheet). Style ini dapat kita buat langsung didalam tag <head> pada dokumen htmlnya. atau kita membuat sebuah file sendiri dengan exntensi .css lalu kemudian tinggal kita panggil dari dalam tag <head> juga.