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">
<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" 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
Tidak ada komentar:
Posting Komentar