เมื่อคุณสร้างเว็บไซต์ของคุณเอง โดยปกติแล้วคุณต้องการให้เว็บไซต์แสดงได้อย่างน่าดึงดูดใจที่สุดโดยไม่คำนึงถึงเวอร์ชันเบราว์เซอร์ของผู้ใช้ โดยเฉพาะเพื่อให้ภาพพื้นหลังถูกยืดออกและปรับให้เข้ากับความละเอียดของจอคอมพิวเตอร์
มันจำเป็น
ทักษะในการทำงานกับ html, css, java-script
คำแนะนำ
ขั้นตอนที่ 1
เปิดโค้ดสำหรับไซต์ของคุณในโปรแกรมแก้ไขใดๆ เช่น Notepad หรือโปรแกรมออกแบบเว็บเฉพาะ Dreamweaver วางบรรทัดต่อไปนี้ลงในโค้ดเพื่อขยายพื้นหลังของไซต์ เพิ่มพื้นหลัง: url ('แทรกลิงก์ไปยังรูปภาพ')
ขั้นตอนที่ 2
หากต้องการกำหนดขนาดรูปภาพในแนวนอน ให้ใช้รหัสต่อไปนี้: พื้นหลัง: url ('แทรกลิงก์ไปยังรูปภาพ' ทำซ้ำ-x) ในแนวตั้ง - ที่ส่วนท้ายของโค้ด ให้แทนที่ x ด้วย y หากไซต์มีการจัดรูปแบบในไฟล์ css ให้วางโค้ดลงไป วิธีนี้จะทำให้คุณสามารถใส่พื้นหลังที่เป็นยางบนไซต์ของคุณได้
ขั้นตอนที่ 3
ใช้ตัวอย่างโค้ดต่อไปนี้เพื่อวางภาพพื้นหลังบนหน้าและขยายภาพโดยอัตโนมัติเพื่อให้พอดีกับความละเอียดของจอภาพที่หน้ากำลังดูอยู่ โค้ดตัวอย่าง: เนื้อหา {พื้นหลัง: "แทรกลิงก์ไปยังภาพพื้นหลัง" () ไม่ทำซ้ำศูนย์ด้านซ้ายคงที่; จากนั้นขนาดพื้นหลัง: […]
ขั้นตอนที่ 4
ในการยืดภาพพื้นหลัง ให้แทรกรูปภาพเป็นพื้นหลังและตั้งค่าความกว้างเป็น 100% ตัวอย่างเช่น แทรกข้อความต่อไปนี้ลงในโค้ดของเพจ: background image "alt =" Enter the name of the image "/> ดังนั้นจะใช้ให้พอดีกับความกว้างของภาพ แต่จะผิดสัดส่วน
ขั้นตอนที่ 5
ในทำนองเดียวกัน คุณสามารถตั้งค่ารูปภาพให้ขยายความสูง ใช้ความสูงแทนแอตทริบิวต์ความกว้าง หรือใช้ตัวอย่างโค้ดต่อไปนี้สำหรับ css: background image of the site) "> และหลังจากนั้นให้เพิ่มความกว้าง 100% ของรูปภาพตามตัวอย่างที่แล้ว นอกจากนี้ คุณยังสามารถใช้สคริปต์เพื่อค้นหาความละเอียดหน้าจอของผู้ใช้และแก้ไขขนาด ของตารางของคุณสำหรับมัน