کار با ویژگی background در CSS | استایل پس زمینه
فهرست مطالب
به یکی دیگر از جلسات دوره آموزش رایگان HTML و CSS خوش آمدید. در این جلسه به معرفی و آموزش کامل کار با background در CSS می‌پردازیم. با استفاده از ویژگی background می‌توان برای عناصر HTML یک پس زمینه تنظیم کرد.
در این درس مجموعه ویژگی‌های backgrounds را یاد خواهید گرفت:
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
ویژگی background-color در CSS
برای تعیین رنگ پس‌زمینه برای یک عنصر می‌توان از ویژگی background-color استفاده کرد. مقدار این ویژگی می‌تواند نام رنگ، کد رنگ یا مقادیر rgb و … باید.
توجه: درمورد کد رنگ، سیستم‌های rgb و … در جلسه‌ای جداگانه صحبت می‌کنیم.
<p style="background-color: green;">من یک پاراگراف با پس زمینه سبز هستم</p>خروجی کد بالا:
من یک پاراگراف با پس زمینه سبز هستم
به همین راحتی می‌توان برای هر عنصری یک رنگ پس‌زمینه تنظیم کرد.
ویژگی background-image در CSS
با استفاده از ویژگی background-image می‌توان یک تصویر را برای پس زمینه عناصر HTML تنظیم کرد.
<p style="background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');">من یک پاراگراف با پس زمینه تصویر هستم</p>خروجی کد بالا:
من یک پاراگراف با پس زمینه تصویر هستم
همانطور که می‌بینید تصویر گل در پس زمینه عنصر p موردنظر نمایش داده شده است. ابعاد این تصویر 80*80 پیکسل است.
ویژگی background-repeat در CSS
همانطور که می‌بینید تصویر فوق همانند موزاییک در کنار هم تکرار شده. برای کنترل روی تکرار تصویر می‌توان از ویژگی background-repeat استفاده کرد. به مثال زیر دقت کنید:
توجه: در مثال زیر از روش internal برای درج دستورات CSS استفاده شده است.
<head>
<title>Document</title>
<style>
p {
background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>یک پاراگراف با تصویر پس زمینه بدون تکرار</p>
</body>نکته: برای کوتاه کردن مثال، در کد بالا از نوشتن تگ‌های DOCTYPE و html صرف نظر شده.
خروجی کد بالا:
یک پاراگراف با تصویر پس زمینه بدون تکرار
این ویژگی می‌تواند مقادیر repeat-x و repeat-y را هم به خود بگیرد، که به ترتیب یعنی تکرار در محور X (چپ و راست) و تکرار در محور Y (بالا و پایین).
ویژگی background-position در CSS
حتما دقت کرده‌اید که در مثال بالا تصویر پس زمینه در سمت چپ عنصر نمایش داده شده است. برای کنترل روی موقعیت نمایش تصویر می‌توان از ویژگی background-position استفاده کرد.
این ویژگی می‌تواند دو پارامتر را به عنوان مقدار دریافت کند. پارامتر اول مربوط به محور X (چپ و راست) و پارامتر دوم مربوط به محور Y (بالا و پایین) است. به مثال زیر دقت کنید:
<head>
<title>Page title</title>
<style>
p {
background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<p>من یک پاراگراف با تصویر پس زمینه هستم</p>
</body>خروجی کد بالا:
من یک پاراگراف با تصویر پس زمینه هستم
در مثال بالا برای پارامتر اول right و برای پارامتر دوم top را تنظیم کرده‌ایم. با توجه به این مقادیر تصویر در گوشه‌ی بالا و سمت راست عنصر نمایش داده می‌شود.
ویژگی background-attachment در CSS
با استفاده از ویژگی background-attachment می‌توان تصویر پس زمینه را نسبت به اسکرول صفحه ثابت (fix) کرد. بصورت پیشفرض مقدار این ویژگی روی scroll تنظیم شده، برای ثابت کردن پس‌زمینه می‌توان از مقدار fixed برای این ویژگی استفاده کرد.
<head>
<title>Page title</title>
<style>
p {
background-image: url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg');
background-attachment: fixed;
}
</style>
</head>
<body>
<p>من یک پاراگراف با تصویر پس زمینه هستم</p>
</body>خروجی کد بالا:
من یک پاراگراف با تصویر پس زمینه ثابت هستم
نسخه کوتاه – ویژگی background
ویژگی background نسخه کوتاه شده تمام ویژگی‌های بالاست. یعنی می‌توان بجای نوشتن چند ویژگی تنها از background استفاده کرد.
Syntax نحوه مقدار دهی به ویژگی background:
background: bg-color bg-image bg-repeat position;به مثال زیر دقت کنید:
<p style="background: pink url('https://adminesite.com/wp-content/uploads/2020/05/flower.jpg') no-repeat top right;">من یک پاراگراف با تصویر پس زمینه هستم</p>خروجی کد بالا:
من یک پاراگراف با تصویر پس زمینه هستم
سلام علیکم.
ببخشید من میخواستم یه کاری کنم که بدون اینکه متن رو بیشتر کنم بک گراند پشت متن رو بزرگ تر کنم.(البته نمیخوام بک گراند کل سایت رو تعیین کنم ها!)
راستش تنها راهی که پیدا کردم استفاده از بود که خیلی حوصله سربره و باید چند دقیقه اینو هی تایپ کرد.
ممنون میشم کمک کنید(:
سلام
میتونید از ویژگی های height و یا min-height استفاده کنید
برای ویژگی background-image برای تست چجوری آدرس عکس رو بدم برای تمرین
سلام وقت بخیر
لطفا درس مربوط به آدرس دهی فایل‌هارو ببینید.
سلام
ممنون از پاسخ گویی تون ..اشکال کار رو پیدا کردم
حالا یه سوال : وقتی یه عکس رو به عنوان بک گراند به body میدیم .اون عکس فضای پس زمینه تگa،em,,b,i را پر می کنه ولی تگ p این خاصیت را ندارهد
یعنی اطراف نوشته هام در تگ p یه پس زمینه سفید قرار میگیره
چطور میشه تصویر را به صورت یکنواخت در کل صفحه قرار داد ؟
سپاسگزارم
سلام اگر میخواین به کل صفحه وب یک پس زمینه تصویر بدید با بکگراند را برای تگ body در نظر بگیرید و به تگ body یک width:100% هم بدید
سلام
عکس من کنار فایل htmlهست و به این شکل توی تگ style آدرس دادم ولی عکسی نمی یاد ??
P{background-image:url(‘untitled-6.jpg’);}
سلام دوست عزیز
کدی که نوشتید درسته. احتمالا نام یا پسوند تصویر رو درست ننوشتید یا اینکه فایل تصویر شما دقیقا در کنار فایل html نیست.
سلام من فایل عکس رو در کنار فایل htmlدارم چطور میتونم ادرس بدم که پس زمینه متن از عکسهای داخل فایلم باشه.امتحان کردم از طریق srcکه نمیپذیرفت.ممنون میشم راهنمایی کنید
سلام لطفا به کدهای نوشته شده توجه کنید. برای بک گراند از تگ img استفاده نمیشه باید با css این مسیردهی رو انجام بدید. در css هم باید آدرس دهی رو بر اساس موقعیت عکس نسبت به css انجام بدید. اگر در کنارهم هستن فقط اسم تصویر رو درج کنید.
سلام خسته نباشید . چجوری میشه بک گراند رو به اندازه ی کل صفحه تنظیم کرد ؟
اگر منظورتون اندازه فقط یه صفحه هستش میتونید به یک عنصر height مناسب بدید و به اون بک گراند بدید. اگر میخواین برای کل سایت تنظیم شه به body بدید.
سلام اگر بخوایم کل صفحه رو بکگراند بزاریم باید چه کار کنیم؟
اگه بخواین به کل صفحه بک گراند بدید باید از تگ‌های کلی که در بر گیرنده‌ی کل عناصره استفاده کنید. مثل تگ body به این عنصر بک گراند بدید.
سلام و عرض ادب
اگه عکس بکگراند رو بخام از تو کامپیوتر خودم انتخاب کنم، چه آدرسی باید بدم؟؟؟؟؟
سلام با css این امکان نیست باید تصویر رو در فایل پروژه قرار بدید.
سلام این امکان در برنامه Adobe Dreamweave وجود داره پیشنهاد میکنم برای طراحی سایت از این برنامه استفاده کنید