سی ایس ایس پس منظر بمقابلہ پس منظر کا رنگ

ٹیگ کا استعمال کرتے ہوئے ایک کنٹینر بنائیں گے اور پھر ایک سرخی اور پیراگراف شامل کریں گے۔

ایچ ٹی ایم ایل

< div >

< h1 > لینکس کا اشارہ < / h1 >

< ص > ہماری ویب سائٹ پر خوش آمدید < / ص >

< / div >

CSS میں، ہم div کی اونچائی کو 'کے طور پر ایڈجسٹ کریں گے۔ 100% اسے پورے صفحہ پر ظاہر کرنے کے لیے اور متن کے فونٹ سائز کے طور پر ' xx-بڑا ' اس کے بعد، پس منظر کا رنگ سیٹ کریں ' ایکوا '

سی ایس ایس

div {

اونچائی : 100% ;

حرف کا سائز : xx-بڑا ;

پس منظر کا رنگ : ایکوا ;

}

ذیل میں فراہم کردہ تصویر میں، آپ دیکھ سکتے ہیں کہ پس منظر کا رنگ لاگو کیا گیا ہے:

سی ایس ایس پس منظر امیج پراپرٹی

' پس منظر کی تصویر HTML عناصر کے پس منظر کے طور پر ایک یا زیادہ تصاویر کو سیٹ کرنے کے لیے پراپرٹی کا استعمال کیا جاتا ہے۔ آپ اس پراپرٹی کو مختلف عناصر کے لیے مختلف پس منظر کی تصاویر شامل کرنے کے لیے استعمال کر سکتے ہیں۔

نحو

بیک گراؤنڈ امیج پراپرٹی کا نحو یہ ہے:

پس منظر کی تصویر: url()

یہاں، اس تصویر کا راستہ دیں جسے آپ پس منظر کے طور پر سیٹ کرنا چاہتے ہیں ایک دلیل کے طور پر ' url() '

مثال

پچھلی مثال کے تسلسل میں، 'میں ایک پس منظر کی تصویر شامل کریں div 'کلاس. ہم تصویر کے یو آر ایل کو 'کے طور پر شامل کریں گے url(img.jpg) ”:

div {

...

پس منظر کی تصویر : یو آر ایل ( img.jpg ) ;

}

ذیل میں فراہم کردہ آؤٹ پٹ اشارہ کرتا ہے کہ پس منظر کی تصویر کامیابی کے ساتھ شامل کی گئی ہے۔

نوٹ کریں کہ تصویر دہرائی گئی ہے۔ اس مسئلے کو حل کرنے کے لیے، اگلی پراپرٹی کو چیک کریں۔

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

جب آپ کسی ویب صفحہ پر کسی تصویر کو پس منظر کے طور پر شامل کرتے ہیں، تو یہ بطور ڈیفالٹ دہرایا جاتا ہے۔ اس تکرار سے بچنے اور اپنی پسند کے مطابق پیٹرن سیٹ کرنے کے لیے، ' پس منظر دوبارہ جائیداد کا استعمال کیا جاتا ہے۔

نحو

بیک گراؤنڈ ریپیٹ پراپرٹی کا نحو یہ ہے:

پس منظر دوبارہ : دہرائیں | تکرار-x | تکرار-y | دوبارہ نہیں

بیک گراؤنڈ ریپیٹ پراپرٹی کی بیان کردہ اقدار کی تفصیل ذیل میں دی گئی ہے۔

• دہرائیں: اس کا استعمال امیج کو عمودی اور افقی دونوں سمتوں میں دہرانے کے لیے کیا جاتا ہے۔
• تکرار-x: یہ تصویر کی تکرار کو صرف افقی طور پر سیٹ کرنے کے لیے استعمال کیا جاتا ہے۔
• تکرار-y: یہ تصویر کی عمودی تکرار کی وضاحت کرتا ہے۔
• غیر دہرانا: اس کا استعمال تصویر کی تکرار سے بچنے کے لیے کیا جاتا ہے۔

مثال

یہاں، ہم بیک گراؤنڈ ریپیٹ پراپرٹی کی ویلیو سیٹ کریں گے ' دوبارہ نہیں ”:

div {

...

پس منظر دوبارہ : دوبارہ نہیں ;

}

اوپر فراہم کردہ کوڈ کا نتیجہ ذیل میں دیا گیا ہے۔ آپ دیکھ سکتے ہیں کہ تصویر کو اب دہرایا نہیں گیا ہے:

سی ایس ایس بیک گراؤنڈ پوزیشن پراپرٹی

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

نحو

بیک گراؤنڈ پوزیشن پراپرٹی کا نحو یہ ہے:

پس منظر کی پوزیشن : قدر

کی جگہ ' قدر ”، آپ تصویر کی پوزیشن کی وضاحت کر سکتے ہیں۔

مثال

یہاں، ہم پس منظر کی پوزیشن کو ' مرکز ”:

div {

...

پس منظر کی پوزیشن : مرکز ;

}

ذیل میں آؤٹ پٹ میں، تصویر صفحہ کے بیچ میں ظاہر ہوتی ہے:

سی ایس ایس پس منظر کے سائز کی پراپرٹی

پس منظر کی تصویر کا سائز سیٹ کرنے کے لیے، ' پس منظر کا سائز 'پراپرٹی استعمال ہوتی ہے۔

نحو

پس منظر کے سائز میں درج ذیل نحو ہے:

پس منظر کا سائز : لمبائی | کور

پس منظر کے سائز کی پراپرٹی کی قدروں کی تفصیل درج ذیل ہے:

• لمبائی: اس کا استعمال پس منظر کی تصویر کی چوڑائی اور اونچائی کو ٹھیک کرنے کے لیے کیا جاتا ہے۔
• احاطہ: اس کا استعمال پورے پس منظر میں پس منظر کی تصویر کو ایڈجسٹ کرنے کے لیے کیا جاتا ہے۔

مثال

ہم پس منظر کا سائز اس طرح سیٹ کریں گے ' 100% 'اونچائی اور' 80% چوڑائی:

div {

...

پس منظر کا سائز : 100% 80% ;

}

آپ دیکھ سکتے ہیں کہ مخصوص جہتوں کی بنیاد پر تصویر کا سائز تبدیل کیا گیا ہے:

سی ایس ایس پس منظر کی اصل پراپرٹی

' پس منظر کی اصل ” پراپرٹی کو پس منظر کی تصویر کے پوزیشننگ ایریا کو ایڈجسٹ کرنے کے لیے استعمال کیا جاتا ہے۔ تصویر کو اوپری بائیں کونے میں بطور ڈیفالٹ ایڈجسٹ کیا جاتا ہے۔

نحو

بیک گراؤنڈ اوریجن پراپرٹی کا نحو یہ ہے:

پس منظر کی اصل : padding-box| بارڈر باکس | مواد باکس

پس منظر کی اصل جائیداد کی قدریں ذیل میں بیان کی گئی ہیں:

• پیڈنگ باکس: یہ پس منظر کی اصل خاصیت کی ڈیفالٹ قدر ہے جسے پیڈنگ ایج کے مطابق پس منظر کی تصویر کی پوزیشن کو ایڈجسٹ کرنے کے لیے استعمال کیا جاتا ہے۔
• بارڈر باکس: یہ تصویر کے بارڈر باکس کے مطابق تصویر کو سیٹ کرنے کے لیے استعمال ہوتا ہے۔
• مواد خانہ: اس کا استعمال تصویر کے مواد کے مطابق پس منظر کی تصویر کو ترتیب دینے کے لیے کیا جاتا ہے۔

نوٹ: بیک گراؤنڈ اوریجن پراپرٹی کام نہیں کرتی ہے اگر بیک گراؤنڈ اٹیچمنٹ پراپرٹی کی قدر کو 'کے طور پر سیٹ کیا گیا ہو۔ طے شدہ '

مثال

سب سے پہلے، کنٹینر کے ارد گرد ایک سرحد بنائیں. یہاں، ہم پچھلی مثال کو جاری رکھیں گے اور پیڈنگ ویلیو کو 'کے طور پر سیٹ کریں گے۔ 10px ' اس کے بعد، سرحد کی چوڑائی کو 'کے طور پر ایڈجسٹ کریں 15px '، سٹائل کے طور پر ' چوٹی '، اور رنگ ' کے طور پر rgb(1, 68, 68) ' آخر میں، ہم پس منظر کی اصل جائیداد کی قدر کو ' مواد باکس ”:

div {

...

بھرتی : 10px ;

سرحد : 15px چوٹی آر جی بی ( 1 ، 68 ، 68 ) ;

پس منظر کی اصل : مواد باکس ;

}

اوپر فراہم کردہ کوڈ کا نتیجہ ذیل میں دیا گیا ہے۔ آپ دیکھ سکتے ہیں کہ تصویر کی پوزیشن div کے مواد کے مطابق سیٹ کی گئی ہے:

سی ایس ایس پس منظر کلپ پراپرٹی

' پس منظر کلپ ' پراپرٹی عنصر کے پس منظر کے رنگ پر کام کرتی ہے۔ یہ آپ کو یہ کنٹرول کرنے دیتا ہے کہ پس منظر کا رنگ کسی عنصر، جیسے عنصر کی پیڈنگ، اس کی سرحد، اور اس کے مواد سے کتنا دور پھیلا ہوا ہے۔

نحو

بیک گراؤنڈ کلپ پراپرٹی کا نحو یہ ہے:

پس منظر کی اصل : بارڈر باکس | padding-box | مواد باکس

پس منظر کی اصل جائیداد کی قدریں ذیل میں بیان کی گئی ہیں:

• بارڈر باکس: یہ بیک گراؤنڈ اوریجن پراپرٹی کی ڈیفالٹ ویلیو ہے جو بارڈر کے پیچھے پس منظر کا رنگ سیٹ کرنے کے لیے استعمال ہوتی ہے۔
• پیڈنگ باکس: اس کا استعمال عنصر کے پیڈنگ باکس کے اندر رنگ کو ایڈجسٹ کرنے کے لیے کیا جاتا ہے۔
• مواد خانہ: یہ عنصر کے مواد کے مطابق پس منظر کا رنگ سیٹ کرنے کے لیے استعمال ہوتا ہے۔

مثال

ہم پچھلی مثال کو جاری رکھیں گے اور بارڈر اسٹائل کی قدر کو 'میں تبدیل کریں گے۔ نقطہ دار پس منظر کلپ کی خاصیت کو سمجھنے کے لیے۔ اس کے بعد، ہم بیک گراؤنڈ کلپ پراپرٹی کی ویلیو سیٹ کریں گے ' پیڈنگ باکس ”:

div {

...

پس منظر کلپ : پیڈنگ باکس ;

}

آؤٹ پٹ اس بات کی نشاندہی کرتا ہے کہ جب سرحدی کنارے ختم ہوتا ہے تو سفید پس منظر کا رنگ ظاہر ہوتا ہے:

سی ایس ایس پس منظر سے منسلک پراپرٹی

' پس منظر سے منسلک صفحہ کو اسکرول کرتے وقت رویے یا تصویر کو ایڈجسٹ کرنے کے لیے پراپرٹی کا استعمال کیا جاتا ہے۔ اس کے رویے کو دوسرے عناصر کے ساتھ سکرولنگ سیٹ یا فکسڈ کیا جا سکتا ہے۔

نحو

بیک گراؤنڈ اٹیچمنٹ پراپرٹی کا نحو یہ ہے:

پس منظر سے منسلک : قدر

آپ بیک گراؤنڈ اٹیچمنٹ کی قدر کو ' کے طور پر سیٹ کر سکتے ہیں۔ طے شدہ پس منظر کی تصویر کو ٹھیک کرنے کے لیے یا ' سکرول تصویر کو صفحہ کے ساتھ سکرول کرنے کی اجازت دینے کے لیے۔

نوٹ: پہلے سے طے شدہ طور پر، پس منظر سے منسلک پراپرٹی کی قدر کو ' سکرول '

یہ دیکھا جا سکتا ہے کہ جب ہم سکرول کرتے ہیں تو شامل کردہ پس منظر کی تصویر جامد نہیں ہوتی۔ اب آئیے اس مسئلے کو ٹھیک کرتے ہیں۔

ایسا کرنے کے لیے، ہم نے بیک گراؤنڈ اٹیچمنٹ پراپرٹی کی قدر کو ' طے شدہ ”:

div {

...

پس منظر سے منسلک : طے شدہ ;

}

یہ نتیجہ یہ ظاہر کرتا ہے کہ تصویر کو ٹھیک کر دیا گیا ہے:

اب، پس منظر اور پس منظر کے رنگ کی خصوصیات کے درمیان موازنہ کی طرف جائیں۔

سی ایس ایس پس منظر بمقابلہ پس منظر کا رنگ

دی گئی جدول ان کی خصوصیات کی بنیاد پر پس منظر اور پس منظر کے رنگ کی خصوصیات میں فرق کرے گا:

خصوصیات	سی ایس ایس پس منظر	CSS پس منظر کا رنگ
قسم	یہ ایک سپر پراپرٹی ہے۔	یہ بیک گراؤنڈ پراپرٹی کی ذیلی پراپرٹی ہے۔
فعالیت	یہ تمام پس منظر کی خصوصیات کا تعین کرتا ہے۔	یہ صرف پس منظر کا رنگ سیٹ کرتا ہے۔
رینج	یہ تمام پس منظر کی خصوصیات کو سپورٹ کرتا ہے۔	یہ صرف پس منظر کے رنگ کی خاصیت کو سپورٹ کرتا ہے۔
سطح	جب آپ کو پس منظر کی متعدد قدریں شامل کرنے کی ضرورت ہوتی ہے، تو اسے استعمال کرنا آسان ہوتا ہے۔ آپ بیک وقت تمام پس منظر کی خصوصیات کی قدریں سیٹ کر سکتے ہیں۔	یہ اس وقت استعمال کیا جا سکتا ہے جب آپ کو صرف ایک پس منظر کا رنگ شامل کرنے کی ضرورت ہو۔
نحو	پس منظر: اقدار (اقدار bg-color، bg-image، اور دیگر خصوصیات ہیں)	background-color: رنگ

اس کی وضاحت کی گئی ہے کہ کس طرح پس منظر کے رنگ کی خصوصیات پس منظر کی خصوصیات سے مختلف ہیں۔

نتیجہ

سی ایس ایس ' پس منظر ” پراپرٹی ایک شارٹ ہینڈ پراپرٹی ہے جسے بیک وقت متعدد پس منظر کی قدریں سیٹ کرنے کے لیے استعمال کیا جاتا ہے، جیسے کہ رنگ، تصویر، پوزیشن، سائز، اصلیت وغیرہ۔ دوسری طرف، ' پس منظر کا رنگ ” صرف پس منظر میں رنگ شامل کرنے کے لیے استعمال ہوتا ہے۔ اس گائیڈ میں، ہم نے CSS بیک گراؤنڈ پراپرٹی اور CSS بیک گراؤنڈ کلر پراپرٹی کے درمیان فرق پر تبادلہ خیال کیا ہے۔