Cara membuat css agar background gambar tidak ikut scroll (fixed) website

Setiap halaman website dibuat sebagus mungkin agar menarik para pengunjung. salah satu cara agar website tampil bagus adalah dengan menambahkan background gambar di belakang halaman. cara yang digunakan untuk menambakannya adalah dengan menggunakan kode css (bagi yang baru kenal css, silahkan searching di google apa itu css).

Biasanya dihalaman website background gambar ikut terbawa scroll ketika di geser. Namun, Bagaimana caranya agar gambar background gambar ini tidak ikut kebawa scroll ketika halaman di geser ke bawah. caranya adalah dengan menambahkan kode css dihalaman tersebut seperti cuplikan kode berikut .

 

body {
background: url(./images/endang_bg.jpg) no-repeat;
background-size: 100% 100%;
background-attachment:fixed;
}

untuk kode

url(./images/endang_bg.jpg)

disesuaikan dengan gambar dan lokasinya berada.

background-size: 100% 100%;

supaya ukuran gambar lebar dan tingginya full halaman.

background-attachment:fixed;

adalah untuk gambar background tidak bergeser.

 

demikian penjelasan dari saya semoga sukses, wassalam.

 

Cara CSS Membuat DIV Posisi Berada di Bawah Kanan Layar

endangcahyapermana-css-div-posisi-bawah-kanan
Div Box

Ketika kita buka halaman website, sering kita lihat ada kotak kecil yang berada di posisi bawah sebelah kanan layar. Kotak tersebut kadang berisi iklan, control navigasi atau layanan live chat atau chating langsung via website. Hal tersebut sungguh menyuguhkan tampilan website menjadi lebih interaktif dengan pengunjung. Namun, bagaimana caranya untuk membuatnya di halaman web html.

Setelah googling akhirnya menemukan cara untuk membuatnya, yaitu dengan menggunakan kode css dan jquery. Lengkap kode nya adalah sebagai berikut.

Didalam kode CSS adalah sebagai berikut

<style type=”text/css”>
.screen {
text-align: center;
background: #00DD88;
background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent;
border-radius: 30px 30px 30px 30px;
margin: 5px 0 10px 15px;
position: absolute;
right: -980px;
display: none;
z-index: 100;
}
</style>

Didalam kode Javascript atau Jquery adalah sebagai berikut

$(‘.screen’).animate({
opacity: 1,
right: “50px”,
bottom: “10px”,
height: “toggle”
}, 1000, function() {
// Animation complete.
}).css(‘position’,’fixed’);

Dan kode html div box adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
 <title>Endang</title>
 https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
 <style type="text/css">
 .screen {
 text-align: center;
 background: #00DD88;
 background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent;
 border-radius: 30px 30px 30px 30px;
 margin: 5px 0 10px 15px;
 padding: 15px;
 position: absolute;
 right: -980px;
 display: none;
 z-index: 100;
 color: #fff;
 }
 </style> 
</head>
<body>
 < div class='screen' >
 welcome to my website
 < /div >
 
 $('.screen').animate({
 opacity: 1,
 right: "50px",
 bottom: "10px",
 height: "toggle"
 }, 1000, function() {
 }).css('position','fixed');
  
</body>
</html>

 

http://www.4shared.com/rar/MFqPXbD9ce/Div_Box_Posisi_Bawah_Kanan_-_e.html