Iklan

Gambar Background Penuh di WordPress


gambarpenuh

Inilah kodenya:

Di Post/Page (HTML Mode)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;
<html>
<head>
<title>Stretched Background Image</title>
<style type=”text/css”>
/* Remove margins from the ‘html’ and ‘body’ tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the ‘html’ and ‘body’ tags. */
#content {position:relative; z-index:1; padding:10px;}
</style>
<!– The above code doesn’t work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 –>
<!–[if IE 6]>
<style type=”text/css”>
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]–>
</head>
<body>
<div id=”page-background”><img src=”http://alwashiyyah.or.id/wordpress/wp-content/uploads/2012/12/kabah2.jpg&#8221; width=”100%” height=”100%” alt=”Smile”></div>
<div id=”content”>
<h1><span style=”color: #ffff00;”>Selamat Datang di Al Washiyyah Foundation!</span></h1>
<p><h2><span style=”color: #ffff00;”><a href=”http://wp.me/P1HUgA-m6″><span style=”color: #2fff00;”>Klik ini untuk melanjutkan!</span></a></span></h2></p>
</div>
</body>
</html>

Di Style.css:

<style type=”text/css”>
.background {
width:150px;
height:150px;
padding:3px;
background-image: url(http://alwashiyyah.or.id/wordpress/wp-content/gallery/alwashiyyah/syahrulgunawan.jpg);
border: 1px solid black;
/* Safari and Chrome */
-webkit-background-size: 190% 160%;

 

 

http://www.quackit.com/html/codes/html_stretch_background_image.cfm

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: