پس منظر گرافکس کے ساتھ اپنی ویب سائٹ بصری دلچسپی دیں
تصاویر کشش ویب سائٹ کے ڈیزائن کا ایک اہم حصہ ہیں. اس میں پس منظر کی تصاویر کا استعمال شامل ہے. یہ تصاویر اور گرافکس ہیں جو ایک صفحے کے علاقوں کے پیچھے استعمال ہوتے ہیں جیسے تصاویر کے مخالف ہیں جو مواد کے صفحات کے حصے میں پیش کیے جاتے ہیں. یہ پس منظر والی تصاویر ایک صفحہ کے بصری دلچسپی کو شامل کرسکتے ہیں اور آپ کو بصری ڈیزائن کو حاصل کرنے میں مدد مل سکتی ہے جو آپ کسی صفحہ پر تلاش کر رہے ہیں.
اگر آپ پس منظر کی تصاویر کے ساتھ کام شروع کرتے ہیں، تو آپ بلاشبہ آپ اس منظر میں چلیں گے جہاں آپ چاہتے ہیں کہ تصویر کو فٹ ہونے کے لۓ ایک تصویر بنائے.
یہ خاص طور پر ذمہ دار ویب سائٹس کے لئے درست ہے جو وسیع پیمانے پر آلات اور اسکرین کے سائز تک پہنچا جا رہا ہے .
پس منظر کی تصویر کو بڑھانے کی یہ خواہش ویب ڈیزائنرز کے لئے بہت عام خواہش ہے کیونکہ ہر تصویر ویب سائٹ کی جگہ میں فٹ بیٹھتا ہے. ایک مقررہ سائز کو قائم کرنے کے بجائے، تصویر کو پھیلانے کی اجازت دیتا ہے کہ اس صفحہ کو فٹ کرنے کے لۓ اس سے کوئی فرق نہ ہو کہ براؤزر ونڈو کو وسیع یا تنگ کیا جائے .
ایک صفحے کے پس منظر کو فٹ کرنے کے لئے ایک تصویر کو بڑھانے کا بہترین طریقہ پس منظر کے سائز کے لئے، CSS3 پراپرٹی کا استعمال کرنا ہے. یہاں ایک مثال یہ ہے کہ ایک صفحہ کے جسم کے لئے ایک پس منظر کی تصویر کا استعمال کرتا ہے اور جس کا انداز 100٪ تک ہوتا ہے تاکہ اس کی سکرین کو ہمیشہ فٹ ہوجائے.
جسم {
پس منظر: url (bgimage.jpg) نہیں دو بار؛
پس منظر کا سائز: 100٪؛
}
Caniuse.com کے مطابق، یہ پراپرٹی IE 9+، فائر فاکس 4+، اوپیرا 10.5+، سفاری 5 +، کروم 10.5+، اور تمام اہم موبائل براؤزرز میں کام کرتا ہے. یہ آج دستیاب تمام جدید براؤزرز کے لئے آپ کا احاطہ کرتا ہے، جس کا مطلب یہ ہے کہ آپ کو اس پراپرٹی کو بغیر کسی خوف سے استعمال کرنا چاہئے جو کسی کی سکرین پر کام نہیں کرے گا.
پرانے براؤزرز میں ایک پیچیدہ پس منظر کا سامنا
یہ بہت امکان نہیں ہے کہ آپ کو IE9 سے بھی زیادہ براؤزرز کی حمایت کرنے کی ضرورت ہوگی، لیکن ہم یہ سمجھتے ہیں کہ آپ فکر مند ہیں کہ IE8 اس پراپرٹی کی حمایت نہیں کرتی ہے. اس مثال میں، آپ جعلی پس منظر کو جعلی کرسکتے ہیں. اور آپ فائر فاکس 3.6 (-موز پس منظر سائز) اور اوپیرا 10.0 (-پس منظر کے سائز) کے لئے براؤزر کے سابقہ استعمال کرسکتے ہیں.
جعلی ایک پس منظر کی تصویر جعلی کرنے کا سب سے آسان طریقہ پورے صفحے پر پھیلا ہوا ہے. اس کے بعد آپ اضافی جگہ کے ساتھ ختم نہیں کرتے ہیں یا فکر مند ہیں کہ آپ کا متن مسلسل علاقے میں بیٹھتا ہے. یہ کس طرح کرنا ہے:
id = "bg" />
- سب سے پہلے، اس بات کو یقینی بنائیں کہ تمام براؤزرز اور ایچ ٹی ایم ایل جسمانی عناصر پر 100٪ کی اونچائی، 0 مارجن، اور 0 فیڈڈنگ ہے. اپنے ایچ ٹی ایم ایل دستاویز کے سر میں مندرجہ ذیل جگہ رکھیں:
- اس تصویر کو شامل کریں جسے آپ پس منظر بننا چاہتے ہیں ویب صفحہ کے پہلے عنصر کے طور پر، اور یہ "bg" کی شناخت دے:
- پس منظر کا نقشہ وضع کریں تاکہ یہ سب سے اوپر اور بائیں جانب طے ہو، اور 100٪ وسیع اور 100٪ اونچائی میں ہے. اپنی سٹائل شیٹ میں شامل کریں:
img # bg {
پوزیشن: مقررہ؛
اوپر: 0؛
بائیں: 0؛
چوڑائی: 100٪؛
اونچائی: 100٪؛
} - "مواد" کی شناخت کے ساتھ ڈی وی عنصر کے اندر اندر اپنے تمام مواد کو صفحہ میں شامل کریں. تصویر کے نیچے ڈیوی شامل کریں:
نوٹ: اب آپ کے صفحے کو دیکھنے کے لئے دلچسپ ہے. تصویر کو بڑھا دیا جانا چاہئے، لیکن آپ کا مواد مکمل طور پر غائب ہے. کیوں؟ کیونکہ پس منظر کی تصویر اونچائی میں 100٪ ہے، اور مواد کی ڈویژن دستاویز کے بہاؤ میں تصویر کے بعد ہے - زیادہ تر براؤزر اسے ظاہر نہیں کرے گی.یہاں آپ کے تمام مواد - ہیڈر، پیراگراف، وغیرہ سمیت
- آپ کے مواد کی حیثیت رکھتا ہے تاکہ یہ نسبتا ہو اور 1 کے ز-انڈیکس ہو. یہ اسے معیاری-مطابق براؤزرز میں پس منظر کی تصویر سے اوپر لے جائے گا. اپنی سٹائل شیٹ میں شامل کریں:
#content {
پوزیشن: رشتہ داری؛
ز-انڈیکس: 1؛
}
- لیکن تم نہیں کر رہے ہو. انٹرنیٹ ایکسپلورر 6 معیار کے مطابق نہیں ہے اور ابھی تک کچھ مسائل ہیں. ہر براؤزر لیکن IE6 سے سی ایس ایس کو چھپانے کے بہت سے طریقوں ہیں، لیکن سب سے آسان (اور کم از کم دیگر مسائل کی وجہ سے امکان) شرطی تبصرے استعمال کرنا ہے. اپنے شیلیفیٹ کے بعد آپ کے دستاویز کے سر میں مندرجہ ذیل رکھو.
- نمایاں کردہ تبصرہ کے اندر، کسی بھی سٹائل شیٹ میں شامل ہوں کہ کچھ شیلیوں کے ساتھ IE 6 حاصل کرنے کے لئے اچھا لگائیں.
- IE 7 اور IE 8 میں بھی ٹیسٹ کرنے کا یقین رکھیں. آپ کو ان کی مدد کرنے کے لئے تبصرے کو ایڈجسٹ کرنا بھی ہوسکتا ہے. تاہم، جب میں نے اس کا تجربہ کیا تو اس نے کام کیا.
ٹھیک ہے - یہ اعتراف سے زیادہ ہے. بہت کم سائٹس اب IE 7 یا 8 کی حمایت کرنے کی ضرورت ہے، بہت کم IE6!
اس طرح، یہ نقطہ نظر آپ کے لئے قدیم اور ممکنہ غیر ضروری ہے. میں یہاں تجسس کے ایک ماڈل کے طور پر یہاں چھوڑتا ہوں کہ ہمارے تمام براؤزروں نے ایک دوسرے کو اچھی طرح سے ساتھ ساتھ ادا کیا ہے.
ایک چھوٹا سا خلا پر ایک پیچیدہ پس منظر کی تصویر کھینچنا
آپ اپنے ویب صفحے پر کسی بھی ڈی وی یا دوسرے عنصر میں جعلی ایک پس منظر کی تصویر جعلی کرنے کے لئے اسی طرح کی تکنیک کا استعمال کرسکتے ہیں. یہ تھوڑا سا مشکل ہے جیسا کہ آپ کو مکمل طور پر پوزیشننگ کا استعمال کرنا پڑے گا یا آپ کے صفحے کے دیگر حصوں کے لئے عجیب وقفہ کاری کے مسائل ہیں.
- اس صفحے پر تصویر رکھیں جو میں پس منظر کے طور پر استعمال کرنا چاہتا ہوں.
- طرز شیٹ میں، تصویر کے لئے چوڑائی اور اونچائی مقرر کیجئے. نوٹ، آپ چوڑائی یا اونچائی کے فی صد استعمال کرسکتے ہیں، لیکن میں اونچائی کے لئے لمبائی اقدار کے ساتھ ایڈجسٹ کرنے میں آسان ہوں.
img # bg {
چوڑائی: 20em؛
اونچائی: 30 ملی میٹر؛
} - آپ کے مواد کو ڈی ڈی "مواد" کے ساتھ ایک ڈیو میں رکھیں جیسا کہ ہم نے اوپر کیا تھا:
یہاں آپ کے سبھی مواد
- پس منظر کی تصویر کے طور پر مواد ڈوی ایک ہی چوڑائی اور اونچائی کا اندازہ کریں:
div # content {
چوڑائی: 20em؛
اونچائی: 30 ملی میٹر؛
} - پھر اس تصویر کو تصویر کے طور پر ایک ہی اونچائی تک کی حیثیت کی حیثیت رکھتا ہے. لہذا اگر آپ کی تصویر 30em ہے تو آپ کے پاس سب سے اوپر کا انداز ہوگا: -30em؛ مواد پر 1 کے ز-انڈیکس ڈالنے کے لئے مت بھولنا.
#content {
پوزیشن: رشتہ داری؛
اوپر: -30em؛
ز-انڈیکس: 1؛
چوڑائی: 20em؛
اونچائی: 30 ملی میٹر؛
} - اس کے بعد IE کے 6 صارفین کے لئے Z- انڈیکس -1 میں شامل کریں، جیسا کہ آپ نے اوپر کیا تھا:
پھر، وسیع براؤزر سے لطف اندوز کرنے کے پس منظر کے ساتھ اب یہ کرتا ہے، یہ نقطہ نظر بہت ضروری ہے کہ لازمی طور پر غیر ضروری ہے اور ایک بائیس دور کی ایک مصنوعات کے طور پر پیش کیا جاتا ہے. اگر آپ نے اس نقطہ نظر کو استعمال کرنا چاہتے ہیں تو، اس بات کا یقین کر لیں کہ اس کے طور پر آپ کے طور پر بہت سے براؤزرز میں اس کی جانچ پڑتال کریں.
اور اگر آپ کا مواد سائز میں تبدیل ہوتا ہے، تو آپ کو آپ کے کنٹینر اور پس منظر کی تصویر کو تبدیل کرنے کی ضرورت پڑے گی، دوسری صورت میں آپ عجیب نتائج کے ساتھ ختم ہوجائیں گے.