آپ کی سائٹس پر مزہ سی ایس ایس پس منظر کیسے شامل کریں

Sep 11, 2025

کيسے

وقت ایک ویب صفحہ کا پس منظر تھا ایک چھوٹا سا ٹائلنگ تصویر تھا - اور اکثر چھپا ہوا، ہر وزیٹر کی آنکھوں پر حملہ. آج، پس منظر بہت آن لائن گرافک ڈیزائن کی بنیاد بناتا ہے.

ویب پر پس منظر میں یہ انقلاب سی ایس ایس میں پیش رفت کی طرف سے حوصلہ افزائی کی گئی ہے. ویب معیارات اب زیادہ کنٹرول پر قابو پاتے ہیں، لہذا آپ احتیاط سے پس منظر کی پوزیشن کی وضاحت کرسکتے ہیں، gradients کے ساتھ کام کرتے ہیں، اور ایک عنصر میں ایک سے زیادہ پس منظر شامل کریں.

اس علاقے میں سب کچھ ڈھکانا ایک کتاب کی ضرورت ہوگی، اور اس طرح ہم آپ کو جانے کے لۓ کچھ اہم آغاز پوائنٹس اٹھایا، اور آپ کو مزید تلاش کرنے کے لئے عجیب انتخاب کا لنک اٹھایا ہے. لطف اندوز!

ویب صفحہ عناصر میں سی ایس ایس پس منظر شامل کریں

سی ایس ایس کے پس منظر کی ضرورت ہوتی ہے پس منظر آثار قدیمہ کی جائیداد، یا زیادہ مخصوص خصوصیات کے استعمال، جیسے (لیکن محدود نہیں): پس منظر کا رنگ ؛ پس منظر کی تصویر ؛ پس منظر کی پوزیشن ؛ پس منظر کا سائز ؛ پس منظر - دوبارہ ؛ اور پس منظر منسلک . یہ ویب صفحہ کے پس منظر کے لئے بیان کیا جا سکتا ہے (کے ذریعے جسم منتخب کنندہ) یا عنوانات، ڈویژن، اور اسی طرح کے صفحے عناصر.

سب سے زیادہ بنیادی سطح پر، آپ استعمال کر سکتے ہیں پس منظر ایک صفحے کو تبدیل کرنے کے لئے ریڈ:

 جسم {
 پس منظر: سرخ؛
 }

تھوڑا سا زیادہ اعلی درجے کی جا رہا ہے، آپ ایک ایسی تصویر شامل کرسکتے ہیں جو افقی طور پر مرکوز کرتے ہیں، اس کے کنٹینر کے سب سے اوپر سے 20 پی ایکس، بار بار نہیں، اور ویب صفحہ سکرال کے طور پر جگہ پر مقرر کیا گیا ہے:

 جسم {
 پس منظر: URL (image.png) مرکز 20px کوئی بار بار مقررہ مقررہ؛
 }

An image as a background (note: avoid this low level of contrast in your own designs) — ایک پس منظر کے طور پر ایک تصویر (نوٹ: آپ کے اپنے ڈیزائن میں اس کے برعکس اس کم سطح سے بچیں)

اگر آپ اسے استعمال کرنے کے بغیر اسے لکھنا چاہتے ہیں پس منظر آتشبازی، یہ اس طرح نظر آئے گا:

 جسم {
 پس منظر کی تصویر: یو آر ایل (image.png)؛
 پس منظر کی پوزیشن: مرکز 20px؛
 پس منظر - دوبارہ: نہیں دوبارہ؛
 پس منظر منسلک: فکسڈ؛
 }

کیا آپ ایک عنصر میں ایک سے زیادہ پس منظر شامل کرنا چاہتے ہیں، آپ سی ایس ایس اعلامیہ میں کما الگ الگ قیمت سیٹ کرسکتے ہیں. نوٹ کریں کہ جو بھی چیز مخصوص ہے وہ سب سے پہلے اسٹیک کے سب سے اوپر ہے، مطلب یہ ہے کہ یہ 'اوپر' دوسرے پس منظر کو ظاہر کیا جائے گا.

 جسم {
 پس منظر: URL (image.png) مرکز 20px کوئی بار بار مقررہ، یو آر ایل (تصویری 2.png) سینٹر سینٹر کوئی بار پھر مقررہ مقررہ؛
 }

اس صورت میں، ایک تصویر پچھلے مثال کے مطابق ظاہر ہوتا ہے، اور براہ راست مواد کے علاقے کے مرکز میں ایک 'ذیل میں'.

پس منظر کی تصاویر کا سائز تبدیل کریں

اب تک، ہم نے بچایا ہے پس منظر کا سائز . لیکن یہ ایک بہت اہم ہے، کیونکہ یہ آپ کو ایک پس منظر کی تصویر کے سائز کو کنٹرول کرنے کے قابل بناتا ہے. خاص طور پر، آپ پکسلز یا فی صد شرائط میں ایک تصویر کے افقی اور عمودی طول و عرض کی وضاحت کرسکتے ہیں، جیسے:

 پس منظر کا سائز: 200px 50px؛

دو مطلوبہ الفاظ کے اقدار بھی ہیں، جو اس کے بجائے استعمال کیا جا سکتا ہے: پر مشتمل ہے اور کور . یہ وسیع پیمانے پر اسی طرح ہیں، ایک عنصر کے مواد کے علاقے کے اندر ایک تصویر پیمانے پر ایک طریقہ فراہم کرنے میں. فرق یہ ہے پر مشتمل ہے ممکنہ حد تک ممکنہ طور پر ایک تصویر بنانے کے لئے ڈیزائن کیا گیا ہے، جبکہ اب بھی مواد کے علاقے کے اندر اندر تمام دکھاتا ہے (مطلب یہ ہے کہ آپ عام طور پر اس کے ارد گرد فرق حاصل کرتے ہیں)، جبکہ کور مکمل طور پر مواد کے علاقے کا احاطہ کرتا ہے، لیکن اس کے نتیجے میں کچھ تصویر نظر انداز نہیں ہوسکتی ہے. بعد میں عام طور پر سائٹس پر استعمال کیا جاتا ہے جو پس منظر کے طور پر تصاویر استعمال کرتے ہیں.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — سی ایس ایس 'پر مشتمل' (اوپر) 'کور' (نیچے) اقدار

نوٹ کریں کہ آپ شامل کر سکتے ہیں پس منظر کا سائز A. پس منظر آثار قدیمہ کی تعریف - اس کے بعد اسے رکھیں پس منظر کی پوزیشن اقدار، دونوں کو الگ کرنے کے آگے سلیش کے ساتھ:

 پس منظر: URL (image.png) مرکز 20px / پر مشتمل نہیں ہے کوئی بار بار مقرر

ہائی ریڈ ریٹنا پس منظر کی تصاویر کا استعمال کریں

جب اعلی ریٹ ریٹنا پس منظر شامل کرتے ہیں، پس منظر کا سائز صحیح سائز پر ظاہر کرنے کے لئے اس طرح کی تصاویر کو مجبور کرنے کے لئے بھی مفید ہے.

مثال کے طور پر، تصور کریں A. ڈیو ایک کے ساتھ بت کے لوگو . یہ، مناسب طریقے سے، ایک علامت (لوگو) سی ایس ایس میں ایک پس منظر کے طور پر لاگو کیا ہے. یہ 150 پکسلز اسکوائر ہے، اور اس طرح بنیادی سی ایس ایس جو آپ استعمال کرتے ہیں:

 #logo {
 چوڑائی: 150px؛
 اونچائی: 150px؛
 پس منظر: URL (logo.png) کوئی بار بار نہیں؛
 }

ہائی ریز چیزوں کو پیچیدہ کرتا ہے. ہم بڑی تصاویر کو لوڈ کرنے کے لئے پرانے ہارڈ ویئر پر مجبور نہیں کرنا چاہتے ہیں، اور اسی طرح میڈیا کے سوال کو صرف معاون ہارڈ ویئر پر اعلی قرارداد علامت (لوگو) کو لوڈ کرنے کے لئے استعمال کیا جانا چاہئے.

 media (- Webkit-min-dive dive-pixel-ratio: 2)
 (منٹ کی قرارداد: 192 ڈیپیپی) {
  #logo {
   پس منظر کی تصویر: یو آر ایل ([email protected])؛
  }
 }

اب مسئلہ ہے @ 2x ہائی ریز تصویر 300 پکسلز اسکوائر ہے (چونکہ اس کے اصل میں دو بار دو بار ہے)، لیکن 150 پکسل مربع کنٹینر کے پس منظر کے طور پر استعمال کیا جاتا ہے. تو اس وقت، آپ صرف اس کا ایک سہ ماہی دیکھتے ہیں.

A high-res image before a resize fix — ایک سائز کا سائز تبدیل کرنے سے پہلے ایک اعلی کی تصویر

یہ ایک مخصوص تفویض کرکے مقرر کیا گیا ہے پس منظر کا سائز قیمت کے لئے #logo. انکار

 #logo {
 چوڑائی: 150px؛
 اونچائی: 150px؛
 پس منظر: URL (logo.png) کوئی بار بار نہیں؛
 پس منظر کا سائز: 150px 150px؛
 }

اعلی ریزو لوگو، اب اس کے کنٹینر کے اندر اندر snugly

ایک سے زیادہ پس منظر کی قراردادوں کے ساتھ کام کرنے اور ایک ہی نتیجہ حاصل کرنے کا ایک جدید طریقہ CSS4 ہے تصویری سیٹ انکار

 #logo {
 پس منظر کی تصویر: تصویری سیٹ (
  URL (logo.png) 1x،
  URL ([email protected]) 2x.
  )؛
 }

کے فوائد تصویری سیٹ آسان سی ایس ایس ہیں، اور صارف ایجنٹ اس تصویر کا تعین کرنے والے تصویر کا تعین کرنا چاہئے. نیچے کے کنارے براؤزر کی حمایت ہے - لکھنے کے وقت - نامکمل رہتا ہے. اس ٹیسٹ کا صفحہ ملاحظہ کریں چیک کرنے کا فوری ذریعہ کے لئے آپ کس طرح براؤزرز کو کرایہ کی حمایت کرتے ہیں. (یہ شاید بہت سے ڈیزائنرز ہیں اعلی ریز کی تصویر کی خدمت کرنے کے لئے سکرپٹ کا استعمال کریں .)

الفا چینلز اور گرڈینٹس کے ساتھ کام کریں

اس گھومنے والی تیز رفتار میں ہماری آخری ٹپ (ویب سائٹ ٹیوٹوریل شرائط میں) آرٹیکل الفا چینلز اور گرڈینٹس کے بارے میں مضمون. جب انٹرنیٹ بھاپ طاقتور تھا، تو آپ اکثر ڈیزائنرز تھے 'چیکربورڈ' GIFs الفا چینلز کو ضم کرنے کے لئے (ہر دوسرے پکسل شفاف تھا). اب، آپ صرف RGBA میں رنگوں کو تفویض کرتے ہیں:

 اہم {
 پس منظر: RGBA (255،255،255،0.7)؛
 }

مندرجہ بالا مثال میں، پس منظر 70 فی صد سفید ہو گا، جو اس کے نیچے دکھانے کے لئے اس کے نیچے ہے. نیم شفاف پس منظر کا استعمال کرتے وقت آپ کو واضح طور پر برقرار رکھنے کے لئے محتاط رہنا ہوگا کہ پیچیدہ تخیل سے اوپر ہیں، لیکن وہ ویب صفحات پر بصری دلچسپی کو شامل کرنے کے لئے بہت اچھا ہوسکتے ہیں.

Alpha channels, gradients, and some questionable colour choices — الفا چینلز، گرڈینٹس، اور کچھ قابل ذکر رنگ انتخاب

اسی طرح، ویب ڈیزائنرز آؤٹ پٹ آؤٹ پٹ اور ٹائل GIFs کے لئے استعمال کیا جاتا ہے اگر وہ ایک پس منظر کے طور پر تدریری چاہتے ہیں، لیکن یہ اب تک ضروری نہیں ہے، جب تک کہ آپ اسے 1999 کی طرح پارٹی نہیں چاہتے ہیں. ان دنوں، آپ CSS3 چاہتے ہیں لکیری-گرڈینٹ اور ریڈیل-گرڈینٹ پراپرٹیز، جس کے لئے آپ ہدایات اور رنگ کی وضاحت کرتے ہیں.

یہاں ایک سی ایس ایس کی حکمرانی ہے جو بنیادی مریض کے ساتھ ہے:

 H1 {
 پس منظر: لکیری تدریسی (دائیں، RGBA (255،255،255،1)، آرجیبی (255،255،255،0))؛
}

یہ سطح پر ایک عنوانات پر لاگو کیا جائے گا، انہیں ایک لکیری مریض دے جو بائیں سے دائیں طرف جاتا ہے، ٹھوس سفید سے شروع ہوتا ہے اور شفاف سفید میں ختم ہوتا ہے.

زاویہ اور ایک سے زیادہ رنگ کا استعمال کرتے ہوئے، آپ کو زیادہ سے زیادہ، gradients کے ساتھ بہت زیادہ جا سکتے ہیں. تجربہ کرنے کے لئے، ایک فوٹوشاپ کی طرح استعمال کرنے کی کوشش کریں سی ایس ایس گریجویٹ جنریٹر اور کوڈ آؤٹ پٹ کی جانچ پڑتال (منسلک ہونے والی مثال کے طور پر منسلک مثال کے طور پر پرانے براؤزرز کے لئے نحو شامل کرتا ہے - بس پکڑو لکیری-گرڈینٹ آپ کے اپنے استعمال کے لئے لائن).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — سی ایس ایس پیٹرن گیلری، نگارخانہ سے پتہ چلتا ہے، آپ سی ایس ایس گرڈینٹس کے ساتھ واقعی فینسی چیزیں کر سکتے ہیں

اگر آپ فینسی چیکنگ کرتے ہیں تو کیا موسمی ویب پیشہ ور گرڈینٹس کے ساتھ کر سکتے ہیں اور پس منظر کا سائز ، لی Vorou کی جانچ پڑتال کریں CSS3 پیٹرن گیلری، نگارخانہ . وہاں آپ زندہ مثال کے بوجھ کو تلاش کریں گے جو تمام قسم کے سنجیدگی سے متاثر کن پس منظر کے پیٹرن کو تخلیق کرنے کے لئے سی ایس ایس گرڈینٹس استعمال کریں گے.

اور، جی ہاں، اس میں سے ایک ایسا اشارہ ہے جہاں ہم ان میں سے بعض میں آنکھوں کے حملوں کے بارے میں آتے ہیں.لیکن جب یہ ویب پس منظر میں آتا ہے تو ہر چیز کے ساتھ، کلید آپ کے ڈیزائن کے تناظر میں متعلقہ ہے اس بات کو یقینی بنانا ہے کہ آپ کے ڈیزائن کے تناظر میں اور سب سے اہم بات یہ ہے کہ پس منظر مواد سے مشغول نہیں ہوتے، یا اسے غیر قانونی بناتے ہیں.

متعلقہ لنکس:

بہتر سی ایس ایس لکھنے کے لئے ایک گائیڈ
سی ایس ایس گرڈ کے ساتھ ایک ذمہ دار ترتیب بنائیں
سی ایس ایس ٹیکنیکس آپ کی ترتیب میں انقلاب کرنے کے لئے

آپ کی سائٹس پر مزہ سی ایس ایس پس منظر کیسے شامل کریں

ویب صفحہ عناصر میں سی ایس ایس پس منظر شامل کریں

پس منظر کی تصاویر کا سائز تبدیل کریں

ہائی ریڈ ریٹنا پس منظر کی تصاویر کا استعمال کریں

الفا چینلز اور گرڈینٹس کے ساتھ کام کریں

کيسے - انتہائی مشہور مضامین

گھوڑے کو کیسے ڈراؤ

ونڈوز، میکوس اور لوڈ، اتارنا Android کے لئے ویب اطلاعات کو کیسے بند کرنا

سی ایس ایس کے ساتھ سمارٹ ٹیکسٹ اثرات کیسے کوڈ

سی ایس ایس کے ساتھ SVG فلٹرز شامل کریں

Redux Thunk کے ساتھ شروع کریں

سنیما 4 ڈی میں مجسم کیسے کریں

پیارے پالتو جانوروں کی پورٹریٹ پینٹ

غیر حقیقی انجن 4 میں ایک کھیل ماحول بنائیں

اقسام