Belajar CSS 5

 BELAJAR LENGKAP CSS



Cara membuat background dengan image atau gambar dengan html dan css

Oke sebelumnya, kalau kamu ingin mencari gambar-gambar berkualitas untuk background HTML, kamu bisa mencarinya disitus-situs yang ada diartikel ini.

Untuk contoh yang ini saya akan coba menggunakan gambar yang berasal dari Unsplash. Dan untuk HTML nya, saya pergunakan kode HTML diatas namun saya rubah sedikit. Jadinya seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Background</title>
    <style>
        body{background-image:url(https://source.unsplash.com/random/800x600);}
    </style>
</head>
<body>
    <h1>Judul Halaman Dengan Background</h1>
    <p>Teks halaman dengan background.</p>
</body>
</html>

Hasilnya nanti akan menjadi seperti dibawah ini. Namun perlu diingat, saya menggunakan source unsplash yang random, jadi mungkin gambar dikamu nantinya akan berbeda-beda apalagi ketika di reload halamannya.

HTML dengan CSS background-image

Seperti yang kita lihat diatas, background nya sudah menggunakan image. Ini css yang berpengaruh untuk merubah background kita

body{background-image:url(https://source.unsplash.com/random/800x600);}

Secara default, background image akan menggunakan “repeat” di property “background-repeat” nya. Jika kamu tidak ingin background nya tidak tampil berulang di html kamu harus menggunakan property lain.

Cara agar background tampil tidak berulang di HTML

Agar background tidak tampil berulang di HTML, kamu harus memasukan CSS property “no-repeat” di property “background-repeat” nya. Jadi nantinya akan jadi seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Background</title>
    <style>
        body{
            background-image:url(https://source.unsplash.com/random/800x600);
            background-repeat: no-repeat;
            }
    </style>
</head>
<body>
    <h1>Judul Halaman Dengan Background</h1>
    <p>Teks halaman dengan background.</p>
</body>
</html>

Dan tampilannya pun akan menjadi seperti ini:

Background tidak berulang di HTML

Jika kamu ingin membuat gambar tersebut menjadi full screen atau menutupi seluruh area, kamu bisa menambahkan css property “background-size:cover” di HTMLnya. Jadi nantinya HTML kita akan menjadi seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Background</title>
    <style>
        body{
            background-image:url(https://source.unsplash.com/random/800x600);
            background-repeat: no-repeat;
            background-size: cover;
            }
    </style>
</head>
<body>
    <h1>Judul Halaman Dengan Background</h1>
    <p>Teks halaman dengan background.</p>
</body>
</html>

Dan tampilannya nanti akan jadi seperti ini:

Gambar background dengan CSS “background-size: cover”

Komentar

Posting Komentar

Postingan populer dari blog ini

contoh operator logika part 2

Gambar
  Rumus untuk menentukan hasil dari operator logika adalah sebagai berikut: Operator  &&  hanya akan menghasilkan true jika kedua operand bernilai true, selain itu hasilnya false. Operator  ||  hanya akan menghasilkan false jika kedua operand bernilai false, selain itu hasilnya true . Operator  !  Akan membalikkan logika, !false menjadi true, !true menjadi false. Kita juga bisa menggabungkan lebih dari satu operasi seperti contoh berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class BelajarJava {    public static void main(String args[]){                 boolean hasil;              hasil = ( false && true ) || ( true || false );      System.out.println( "Hasil: " + hasil );               hasil = ! false && ( false || true ...
Baca selengkapnya

Variabel PHP

Gambar
VARIABEL PHP Variabel dalam PHP Variable adalah suatu pengenal di dalam program yang merepresentasikan nilai atau data tertentu. Nilai variabel dapat diubah sesuai dengan kebutuhan program. Dalam Bahasa PHP, variable didefinisikan dengan cara membubuhkan tanda  $  (dollar) di depannya. Contoh :         $nama = 'SmartDevTala' Pada contoh di atas, kita dapat membuat variable  $nama  dan mengisi nilai ke dalamnya. Dalam penggunaan variable, PHP sedikit berbeda dengan Bahasa program lain, karena pada bahasa program yang lain pada umumnya perlu mendeklarasikan tipe data pada variabel sebelum menampung nilai di dalamnya, sebagai contoh :        $x = "SmartDevTala";       $x = 8;       $x = 10.3;       $x = true;       $x = ["SmartDevTala",8,10.3,true]; Pada contoh di atas, variable  $x  dapat menampung nilai dari beberapa tipe data, yaitu : string, integer, floati...
Baca selengkapnya

Tipe Data Phyton

Gambar
  Tipe Data Python Tipe data adalah suatu media atau memori pada komputer yang digunakan untuk menampung informasi. Python sendiri mempunyai tipe data yang cukup unik bila kita bandingkan dengan bahasa pemrograman yang lain. Berikut adalah tipe data dari bahasa pemrograman Python : Tipe Data Contoh Penjelasan Boolean True  atau  False Menyatakan benar  True  yang bernilai  1 , atau salah  False  yang bernilai  0 String "Ayo belajar Python" Menyatakan karakter/kalimat bisa berupa huruf angka, dll (diapit tanda  "  atau  ' ) Integer 25  atau  1209 Menyatakan bilangan bulat Float 3.14  atau  0.99 Menyatakan bilangan yang mempunyai koma Hexadecimal 9a  atau  1d3 Menyatakan bilangan dalam format heksa (bilangan berbasis 16) Complex 1 + 5j Menyatakan pasangan angka real dan imajiner List ['xyz', 786, 2.23] Data untaian yang menyimpan berbagai tipe data dan isinya bisa diubah-ubah Tuple ('xyz', 768, 2.23)...
Baca selengkapnya