Cara Membuat Background Fullwidth dengan HTML CSS

Cara Membuat Background Fullwidth dengan HTML CSS - Trend website saat ini adalah menggunakan section untuk membuat tampilan website memiliki background penuh dari ujung kiri sampai ke ujung kanan, pada artikel kali ini saya akan membuat salah satu contoh dalam menggunakan konsep website fullwidth. Baiklah, sekarang simak tutorial berikut.

1. Membuat Struktur HTML yang Benar
Hal yang harus di perhatikan adalah pembuatan struktur html yang benar, karena nantinya akan memberikan kemudahan untuk kita saat mengatur layout menggunakan css. Berikut ini adalah struktur html yang bisa kalian gunakan.

<!DOCTYPE html>
<html>
<head>
    <title>Full Width Background</title>

</head>
<body>
<header>
    <div class="container">
        <div class="left">
            <h1>Left</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="right">
            <h1>Right</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</header>
</body>
</html>

2. Memberikan CSS Pada masing – masing elemen HTML
Berikut ini adalah css yang kita gunakan untuk memberikan style agar dapat terbentuk section dengan background fullwidth

*{margin:0;padding: 0}
.container{
    width: 800px;
    margin: auto;
}
header{
    background: lightgreen;
    overflow: hidden;
}
.left{
    float: left;
    width:300px;
}
.right{
    float: right;
    width:300px;
}

Baiklah teman-teman demikian artikel kali ini yang membahas tentang cara membuat background fullwidth dengan html css, dengan begitu kita bisa juga terapkan konsep ini ketika kalian menggunakan bootstrap nantinya. Semoga bermanfaat

 

21 September 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat