EZ

EZNotes

🖼️ Practical 72: Using image file as a background of a webpage

Learn how to set an image as the background of a webpage using the background attribute and CSS background-image property.

🎯 Aim

To create an HTML webpage that demonstrates how to use an image file as the background of a webpage using the background attribute and CSS background-image property.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result
  • An image file (JPG, PNG, GIF, etc.)

📖 Introduction

There are two ways to set an image as the background of a webpage:

  • Using the background attribute in the <body> tag (deprecated but still works).
  • Using CSS background-image property (recommended modern method).
⚠️ Important: The background attribute in the <body> tag is deprecated in HTML5. Use CSS for modern web development. However, both methods are covered here for learning purposes.
💡 Tip: CSS gives you more control with properties like background-size, background-repeat, background-position, and background-attachment.

📊 Preview of the Output

🖼️ Image as Background

🎨 Background Image Examples

Pattern Background

Using repeating patterns as background

Gradient Background

CSS gradients can also be used as backgrounds

🌆 City Skyline

This simulates a city image background

📐 Background Properties
background-repeat repeat
background-size: cover cover
background-size: contain contain
background-attachment: fixed fixed

📝 Step‑by‑Step: Creating the HTML Page

Method 1: Using the background Attribute (Deprecated)

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following code:
<!-- Method 1: Using background attribute (deprecated) --> <html> <head> <title>Background Image - Attribute</title> </head> <!-- Using background attribute in body tag --> <body background="background.jpg"> <h1>Welcome to My Page</h1> <p>This page has a background image using the background attribute.</p> </body> </html>

Method 2: Using CSS (Recommended Modern Method)

  1. In Notepad++, write the following code:
<!-- Method 2: Using CSS background-image (recommended) --> <html> <head> <title>Background Image - CSS</title> <style> /* Setting background image using CSS */ body { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; color: white; } /* Adding a dark overlay for better text readability */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: -1; } </style> </head> <body> <h1>Welcome to My Page</h1> <p>This page has a background image using CSS.</p> <p>The image covers the entire page and stays fixed while scrolling.</p> </body> </html>

Step 2: Save the File

  1. Go to File → Save As… (or press Ctrl+Shift+S).
  2. Choose a location (e.g., Desktop).
  3. Name the file: "bg_image.html" or "practical72.html".
  4. In "Save as type", select All types (*.*).
  5. Click Save.

Step 3: Add Your Image

  1. Place your image file (e.g., "background.jpg") in the same folder as your HTML file.
  2. Make sure the filename in the url() or background attribute matches your actual image filename.

Step 4: Open in Browser

  1. Navigate to the folder where you saved the file.
  2. Double‑click the bg_image.html file.
  3. It will open in your default web browser.
  4. You will see the webpage with the image as the background.

📊 CSS Background Properties

Property Purpose Example
background-image Sets the background image url('image.jpg')
background-size Controls the size of the background image cover, contain, 100%
background-repeat Controls if the image repeats no-repeat, repeat-x, repeat-y
background-position Sets the position of the image center, top right, 50% 50%
background-attachment Controls if the background scrolls fixed, scroll
background Shorthand for all background properties url('img.jpg') no-repeat center cover

📊 Background Size Values

Value Description Effect
cover Scales the image to cover the entire element Image may be cropped, but fills the whole area
contain Scales the image to fit within the element Entire image is visible, may leave empty space
auto Default, image displays at original size May repeat if smaller than element
Percentage Scales to percentage of parent 100% 100% stretches to fill
Pixel values Fixed size in pixels 300px 200px

📊 Shorthand Background Property

<!-- Using shorthand background property --> <style> body { /* Shorthand: image repeat position / size attachment */ background: url('background.jpg') no-repeat center / cover fixed; } </style>

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Wrong file path Image won't load Check the path and filename
Image too large Slow page load Optimize images for web
Poor text readability Text hard to read on image Add overlay or use contrasting text
Using background attribute in HTML5 Deprecated Use CSS background-image
Missing url() in CSS Image won't load Use url('image.jpg')

📊 Observations

  • The background attribute in the <body> tag is deprecated in HTML5.
  • CSS provides more control with properties like background-size, background-repeat, and background-position.
  • background-size: cover fills the entire page without distorting the image.
  • background-attachment: fixed creates a parallax-like effect.
  • Adding a dark overlay improves text readability on background images.
  • Always use optimized images to improve page load speed.

✅ Result

You have successfully:

  • Used an image file as the background of a webpage.
  • Learned both the deprecated attribute method and the modern CSS method.
  • Used CSS properties like background-image, background-size, background-repeat, and background-attachment.
  • Viewed the result in a browser.
📌 Important: Always use CSS for background images in modern web development. It gives you more control and is the standard practice. Use background-size: cover for full-page backgrounds and add overlays for better text readability.
💡 Next Steps: Try using different background properties like background-blend-mode for creative effects. Experiment with multiple backgrounds using CSS. Learn about responsive backgrounds that work on all screen sizes. Try using gradients as an alternative to images!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو بیک گراؤنڈ کے طور پر تصویری فائل کو استعمال کرنے کا طریقہ ظاہر کرتا ہے background صفت اور CSS background-image پراپرٹی کا استعمال کرتے ہوئے۔

🛠️ آپ کو کیا چاہیے

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر
  • ایک تصویری فائل (JPG، PNG، GIF وغیرہ)

📖 تعارف

ویب صفحے کا بیک گراؤنڈ تصویر سیٹ کرنے کے دو طریقے ہیں:

  • <body> ٹیگ میں background صفت کا استعمال (متروک لیکن اب بھی کام کرتا ہے)۔
  • CSS background-image پراپرٹی کا استعمال (تجویز کردہ جدید طریقہ)۔
⚠️ اہم: <body> ٹیگ میں background صفت HTML5 میں متروک ہے۔ جدید ویب ڈیولپمنٹ کے لیے CSS استعمال کریں۔ تاہم، سیکھنے کے مقاصد کے لیے دونوں طریقوں کا احاطہ کیا گیا ہے۔
💡 مشورہ: CSS آپ کو background-size، background-repeat، background-position، اور background-attachment جیسی پراپرٹیز کے ساتھ زیادہ کنٹرول دیتا ہے۔

📊 آؤٹ پٹ کا پیش منظر

🖼️ تصویر بطور بیک گراؤنڈ

🎨 بیک گراؤنڈ امیج کی مثالیں

پیٹرن بیک گراؤنڈ

بیک گراؤنڈ کے طور پر دہرائے جانے والے پیٹرن کا استعمال

گریڈینٹ بیک گراؤنڈ

CSS گریڈینٹس بھی بیک گراؤنڈ کے طور پر استعمال کیے جا سکتے ہیں

🌆 شہر کا اسکائی لائن

یہ شہر کی تصویر کے بیک گراؤنڈ کی نقل کرتا ہے

📐 بیک گراؤنڈ پراپرٹیز
background-repeat repeat
background-size: cover cover
background-size: contain contain
background-attachment: fixed fixed

📝 مرحلہ وار: HTML صفحہ بنانا

طریقہ 1: background صفت کا استعمال (متروک)

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا کوڈ لکھیں:
<!-- طریقہ 1: background صفت کا استعمال (متروک) --> <html> <head> <title>Background Image - Attribute</title> </head> <!-- body ٹیگ میں background صفت کا استعمال --> <body background="background.jpg"> <h1>میرے صفحہ پر خوش آمدید</h1> <p>اس صفحے کا background صفت کا استعمال کرتے ہوئے بیک گراؤنڈ امیج ہے۔</p> </body> </html>

طریقہ 2: CSS کا استعمال (تجویز کردہ جدید طریقہ)

  1. Notepad++ میں، نیچے دیا گیا کوڈ لکھیں:
<!-- طریقہ 2: CSS background-image کا استعمال (تجویز کردہ) --> <html> <head> <title>Background Image - CSS</title> <style> /* CSS کا استعمال کرتے ہوئے بیک گراؤنڈ امیج سیٹ کرنا */ body { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; color: white; } /* بہتر پڑھنے کی اہلیت کے لیے ڈارک اوورلے کا اضافہ */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: -1; } </style> </head> <body> <h1>میرے صفحہ پر خوش آمدید</h1> <p>اس صفحے کا CSS کا استعمال کرتے ہوئے بیک گراؤنڈ امیج ہے۔</p> <p>تصویر پورے صفحے کو ڈھانپتی ہے اور سکرول کرتے وقت مستقل رہتی ہے۔</p> </body> </html>

دوسرا قدم: فائل محفوظ کریں

  1. File → Save As… (یا Ctrl+Shift+S) پر جائیں۔
  2. ایک مقام منتخب کریں (مثلاً Desktop)۔
  3. فائل کا نام رکھیں: "bg_image.html" یا "practical72.html"۔
  4. "Save as type" میں All types (*.*) منتخب کریں۔
  5. Save پر کلک کریں۔

تیسرا قدم: اپنی تصویر شامل کریں

  1. اپنی تصویری فائل (مثلاً "background.jpg") کو اپنی HTML فائل والے فولڈر میں رکھیں۔
  2. یقینی بنائیں کہ url() یا background صفت میں فائل کا نام آپ کی اصل تصویری فائل کے نام سے مماثل ہے۔

چوتھا قدم: براؤزر میں کھولیں

  1. اس فولڈر میں جائیں جہاں آپ نے فائل محفوظ کی تھی۔
  2. bg_image.html فائل پر ڈبل‑کلک کریں۔
  3. یہ آپ کے ڈیفالٹ براؤزر میں کھل جائے گی۔
  4. آپ کو تصویر کے ساتھ بیک گراؤنڈ کے طور پر ویب صفحہ نظر آئے گا۔

📊 CSS بیک گراؤنڈ پراپرٹیز

پراپرٹی مقصد مثال
background-image بیک گراؤنڈ امیج سیٹ کرتا ہے url('image.jpg')
background-size بیک گراؤنڈ امیج کے سائز کو کنٹرول کرتا ہے cover، contain، 100%
background-repeat کنٹرول کرتا ہے کہ امیج دہرائی جائے یا نہیں no-repeat، repeat-x، repeat-y
background-position امیج کی پوزیشن سیٹ کرتا ہے center، top right، 50% 50%
background-attachment کنٹرول کرتا ہے کہ بیک گراؤنڈ سکرول کرتا ہے یا نہیں fixed، scroll
background تمام بیک گراؤنڈ پراپرٹیز کے لیے شارٹ ہینڈ url('img.jpg') no-repeat center cover

📊 بیک گراؤنڈ سائز کی اقدار

قدر وضاحت اثر
cover پورے عنصر کو ڈھانپنے کے لیے تصویر کو پیمانہ کرتا ہے تصویر کٹ سکتی ہے، لیکن پورے علاقے کو بھرتی ہے
contain عنصر کے اندر فٹ ہونے کے لیے تصویر کو پیمانہ کرتا ہے پوری تصویر نظر آتی ہے، خالی جگہ چھوڑ سکتی ہے
auto ڈیفالٹ، تصویر اصل سائز میں ظاہر ہوتی ہے اگر عنصر سے چھوٹی ہو تو دہرائی جا سکتی ہے
فیصد والدین کے فیصد کے مطابق پیمانہ کرتا ہے 100% 100% بھرنے کے لیے کھینچتا ہے
پکسل اقدار پکسلز میں مقررہ سائز 300px 200px

📊 شارٹ ہینڈ بیک گراؤنڈ پراپرٹی

<!-- شارٹ ہینڈ background پراپرٹی کا استعمال --> <style> body { /* شارٹ ہینڈ: image repeat position / size attachment */ background: url('background.jpg') no-repeat center / cover fixed; } </style>

📊 عام غلطیاں جن سے بچنا ہے

غلطی یہ کیوں غلط ہے صحیح طریقہ
غلط فائل پاتھ تصویر لوڈ نہیں ہوگی پاتھ اور فائل کا نام چیک کریں
تصویر بہت بڑی صفحہ لوڈ سست ویب کے لیے تصاویر کو بہتر بنائیں
ناقص ٹیکسٹ پڑھنے کی اہلیت ٹیکسٹ کو تصویر پر پڑھنا مشکل اوورلے شامل کریں یا متضاد ٹیکسٹ استعمال کریں
HTML5 میں background صفت کا استعمال متروک CSS background-image استعمال کریں
CSS میں url() غائب تصویر لوڈ نہیں ہوگی url('image.jpg') استعمال کریں

📊 مشاہدات

  • <body> ٹیگ میں background صفت HTML5 میں متروک ہے۔
  • CSS background-size، background-repeat، اور background-position جیسی پراپرٹیز کے ساتھ زیادہ کنٹرول فراہم کرتا ہے۔
  • background-size: cover تصویر کو بغیر بگاڑے پورے صفحے کو بھرتا ہے۔
  • background-attachment: fixed پیرالیکس جیسا اثر پیدا کرتا ہے۔
  • بیک گراؤنڈ امیجز پر ٹیکسٹ کی پڑھنے کی اہلیت کو بہتر بنانے کے لیے ڈارک اوورلے کا اضافہ کریں۔
  • صفحہ لوڈ کی رفتار کو بہتر بنانے کے لیے ہمیشہ بہتر کردہ تصاویر استعمال کریں۔

✅ نتیجہ

آپ نے کامیابی سے:

  • ویب صفحے کے بیک گراؤنڈ کے طور پر تصویری فائل کا استعمال کیا۔
  • متروک صفت طریقہ اور جدید CSS طریقہ دونوں سیکھے۔
  • background-image، background-size، background-repeat، اور background-attachment جیسی CSS پراپرٹیز کا استعمال کیا۔
  • نتیجہ کو براؤزر میں دیکھا۔
📌 اہم: جدید ویب ڈیولپمنٹ میں بیک گراؤنڈ امیجز کے لیے ہمیشہ CSS استعمال کریں۔ یہ آپ کو زیادہ کنٹرول دیتا ہے اور معیاری عمل ہے۔ مکمل صفحہ کے بیک گراؤنڈ کے لیے background-size: cover استعمال کریں اور بہتر ٹیکسٹ پڑھنے کی اہلیت کے لیے اوورلے شامل کریں۔
💡 اگلے اقدامات: تخلیقی اثرات کے لیے background-blend-mode جیسی مختلف بیک گراؤنڈ پراپرٹیز استعمال کرنے کی کوشش کریں۔ CSS کا استعمال کرتے ہوئے متعدد بیک گراؤنڈز کے ساتھ تجربہ کریں۔ ذمہ دار بیک گراؤنڈز کے بارے میں سیکھیں جو تمام اسکرین سائز پر کام کرتے ہیں۔ تصاویر کے متبادل کے طور پر گریڈینٹس استعمال کرنے کی کوشش کریں!
⬅ Back to Practical Notebooks