Image with the background and text

Memasang kode Gambar dengan latar belakang dan text
Code ini menggunakan CSS dan HTML. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style type="text/css">

/* CSS */

#member-squares, #member-squares *{box-sizing: border-box}
#member-squares a{text-decoration: none}
.member-square{padding: 5px 30px 30px 30px; width: 300px; height: 300px; margin: 9px 20px 20px 9px; display: inline-block; vertical-align: top; color: transparent; -webkit-transition: box-shadow 0.2s linear; -transition: box-shadow 0.2s linear}
.member-square:hover{box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5); color: white}
.member-name{background-color: #0fa9ec; color: white; position: relative; right: 39px; top: -9px; padding: 8px}
.member-square#person1 {background-image: url('http://placehold.it/300&text=Person+1')}
.member-square#person2 {background-image: url('http://placehold.it/300&text=Person+2')}
.member-square#person3 {background-image: url('http://placehold.it/300&text=Person+3')}
.member-square#person4 {background-image: url('http://placehold.it/300&text=Person+4')}

/* HTML */

<div id="member-squares">
<a href="http://Link Title">
<div class="member-square" id="person1">
<span class="member-name">Person 1 - owner</span><br>
Your Text.
</div>
</a>
<a href="http://Link Title">
<div class="member-square" id="person2">
<span class="member-name">Person 2 - owner</span><br>
Your Text.
</div>
</a>
<a href="http://Link Title">
<div class="member-square" id="person3">
<span class="member-name">Person 3 - owner</span><br>
Your Text.
</div>
</a>
<a href="http://Link Title">
<div class="member-square" id="person4">
<span class="member-name">Person 4 - owner</span><br>
Your Text.
</div>
</a>
</div>

Penjelasan :
Tambahkan code teks 3D untuk judul agar tampilan terlihat rapih, copy code berikut :

@import "compass/css3";
body {
    background: #fff;
    padding-left:0px;}

h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 0px 0;
}

.otto {
  background: #dad ;
  color: yellow;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}

Pastekan dibawah code :

<style type="text/css">

Kemudian copy code berikut ini :

<section id="main">
<div class="page-wrap">
<h1 class="otto">
DEMO SHOW
</h1>
<font size="5" color=" green "face="Time newroman">YOUR TEXT</a> </font>

Pastekan dibawah code : </style>
Selanjutnya klik pratinjau untuk melihat hasil dan klik perbarui selesai. Test Code Here

Edited by. Myscript2010
Sources by. Daniel Peukert

DEMOSHOW

See also code after modificationCode Here Image with the background 

Category: Image with the background and text HTML CSS