ช่วยทีครับ เรื่อง CSS [วิธีทำให้ BG ปรับขนาดอัตโนมัติ]

เริ่มโดย sornram9254, 30 มีนาคม 2011, 20:42:31

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

sornram9254

30 มีนาคม 2011, 20:42:31
ไม่ทราบว่าถ้ราเราจะทำพื้นหลังเว็บ โดยใช้ CSS ให้ได้ผลลัพท์แบบนี้

โค้ด เลือก
<style>
#bg {position:fixed; top:0; left:0; width:100%; height:100%;
}
</style>
<div id="bg">
<img src="http://www.geekpedia.com/gallery/fullsize/windows-7-blue-orange-black-wallpaper.jpg" height="100%" width="100%">
</div>

แต่ไม่ต้องการให้ลากรูปภาพได้ ไม่ทราบต้องเขียนยัวไงครับ
คือเวลาย่อหรือขยายเบราว์เซอร์ รูปพื้นหลังจะย่อ/ขยายตามอ่ะครับ

aCustiCz

#1
30 มีนาคม 2011, 21:00:40
โค้ด เลือก
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{ margin:0px;}
h1{color:red; text-align:center;}
.stretchy{
position:absolute;
width:100%;
z-index:-1;
}
</style>

<script>
var z;
function init(){
z=bg.offsetWidth/bg.offsetHeight;
adjust();
}

function adjust(){
var b=document.body
var width=b.offsetWidth;
var height=b.offsetHeight;
var newHeight=width/z;
self.resizeBy(0,newHeight-height)

}
</script>

</head>

<body scroll=no onresize="adjust()" onload="init()">
<img id="bg" class="stretchy" src="http://www.geekpedia.com/gallery/fullsize/windows-7-blue-orange-black-wallpaper.jpg">
<br>
<br>
<h1>Heading</h1>

</body>
</html>


ได้แค่นี้อะครับ

sornram9254

#3
30 มีนาคม 2011, 21:06:28
อ้างถึงจาก: aCustiCz ใน 30 มีนาคม 2011, 21:00:40
โค้ด เลือก
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{ margin:0px;}
h1{color:red; text-align:center;}
.stretchy{
position:absolute;
width:100%;
z-index:-1;
}
</style>

<script>
var z;
function init(){
z=bg.offsetWidth/bg.offsetHeight;
adjust();
}

function adjust(){
var b=document.body
var width=b.offsetWidth;
var height=b.offsetHeight;
var newHeight=width/z;
self.resizeBy(0,newHeight-height)

}
</script>

</head>

<body scroll=no onresize="adjust()" onload="init()">
<img id="bg" class="stretchy" src="http://www.geekpedia.com/gallery/fullsize/windows-7-blue-orange-black-wallpaper.jpg">
<br>
<br>
<h1>Heading</h1>

</body>
</html>


ได้แค่นี้อะครับ

มันยังลากได้อยู่ดีครับ แหะๆ แต่ก็ขอบคุณมากครับที่พยายามช่วย  :wanwan017:

sornram9254

#4
30 มีนาคม 2011, 22:11:11
ผมลองทำเขียนใหม่ดู ได้แบบนี้อ่ะครับ  :'(
โค้ด เลือก
<style>
body {
background: url('http://www.geekpedia.com/gallery/fullsize/windows-7-blue-orange-black-wallpaper.jpg') top center ;
background-size: 80%;
background-origin: content;
background-repeat: repeat-x;
}
</style>
รบกวนไปลองทดสอบหน่อยครับ ว่าเวิร์คไหม
ถ้าใครคิดได้ดีกว่านี้ หรือจะแนะนำอะไร ก็บอกนะครับ  :P
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้