فرمت دهی پس زمینه در CSS
تغییر رنگ و تصویر پس زمینه در CSS
خصوصیات مربوط به پس زمینه در CSS برای کار با پس زمینه یک عنصر استفاده می شوند.
این خصوصیات عبارتند از:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
رنگ پس زمینه
خصوصیت background-color رنگ پس زمینه یک عنصر را مشخص می کند.
در مثال زیر رنگ پس زمینه در گزینشگر body تنظیم شده است:
در CSS رنگ به یکی از روش های زیر مشخص می شود:
- name: نام رنگ باید مشخص شود مانند "red"
- RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
- Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #
در مثال زیر رنگ های پس زمینه مختلف برای عناصر h1 و p و div تنظیم شده است:
مثال (فرمت دهی پس زمینه در CSS)
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
نمایش یک عکس در پس زمینه
خصوصیت background-image یک عکس را به عنوان پس زمینه برای یک عنصر مشخص می کند.
به صورت پیش فرض عکس در محور X و Y تکرار می شود و تمام پس زمینه عنصر مورد نظر را می پوشاند.
در مثال زیر یک عکس به عنوان پس زمینه تنظیم شده است:
مثال زیر یک ترکیب نامناسب از پس زمینه و متن را نشان می دهد. متن تقریباً ناخواناست:
تکرار عکس در محور X و Y
اگر تکرار عکس تنظیم نشود، به صورت پیشفرض عکس مورد نظر در دو محور X و Y تکرار خواهد شد.
بعضی مواقع یک عکس باید فقط در محور X و یا فقط در محور Y تکرار شود، در مثال زیر عکس به طور پیشفرض در دو محور X و Y تکرار شده است:
اگر عکس مثال قبل، فقط در محور X تکرار شود، پس زمینه بهتری خواهیم داشت.
مثال (فرمت دهی پس زمینه در CSS)
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
تنظیم مکان عکس پس زمینه
توجه: زمانی که از عکس پس زمینه استفاده می کنید، توجه داشته باشید که عکس مورد نظر باعث ناخوانایی متن نشود.
در مثال زیر با تنظیم خصوصیت background-repeat با مقدار "no-repeat" عکس پس زمینه فقط یکبار نمایش داده می شود.
مثال (فرمت دهی پس زمینه در CSS)
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
در مثال بالا، عکس پس زمینه و متن در یک مکان قرار گرفته اند و این امر باعث ناخوانایی متن شده است.
مکان عکس پس زمینه یک عنصر، با خصوصیت background-position مشخص می شود:
مثال (فرمت دهی پس زمینه در CSS)
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
مختصر نویسی - پس زمینه
همانطور که در مثال های بالا مشاهده کردید، برای تنظیم پس زمینه، با خصوصیات زیادی سروکار داریم.
برای کوتاه تر شدن کد، این امکان وجود دارد که همه خصوصیات مربوط به پس زمینه را در یک خصوصیت مشخص کنیم، این کار به اصطلاح مختصر نویسی نامیده می شود.
در CSS از خصوصیت "background" برای مختصر نویسی پس زمینه استفاده می شود:
مثال (فرمت دهی پس زمینه در CSS)
ترتیب مقادیر باید به صورت زیر باشد:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.
چگونه عکس پس زمینه را ثابت کنیم
این مثال نشان خواهد داد که اگر صفحه Scroll داشت، حتی اگر به سمت پایین حرکت کردیم عکس پس زمینه در جای خود ثابت باشد.
مثال پیشرفته
در این مثال از CSS پیشرفته استفاده شده است، لطفاً نگاهی به آن بیندازید.
کلیه خصوصیات مربوط به پس زمینه
| خصوصیت | توضیحات |
|---|---|
| background |
کلیه خصوصیات مربوط به پس زمینه را در یک مرحله تنظیم می کند. |
| background-attachment |
مکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه |
| background-color |
رنگ پس زمینه یک عنصر را تنظیم می کند. |
| background-image |
عکس پس زمینه یک عنصر را تنظیم می کند |
| background-position |
مکان عکس پس زمینه یک عنصر را تنظیم می کند |
| background-repeat |
چگونگی تکرار عکس پس زمینه یک عنصر را تنظیم می کند |
آموزش تصویری مطلب بالا (فیلم آموزش CSS) |
|---|
| درس شماره 5 (فرمت دهی پس زمینه در CSS) زمان فیلم: 46:09 |
|
خرید و دانلود مستقیم فیلم آموزش CSS - حجم دانلود 1.12 گیگابایت (کلیک کنید +) |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 55162
دیدگاه‌ها
سلام خسته نباشید آموزش هاتون عالی است.
عالی
سلام ممنون از سایت بسیار خوبتون و خدا قوت
سلام
وقتی عرض یک div را برابر 100% قرار میدیم از بالا و کنار div فاصله ایجاد میشه چطوری این فاصله رو حذف کنیم.ممنون
با سلام.
دقت کنید عنصر بالایی اون div خاصیت padding نداشته باشه، و همینطور خود div خاصیت margin نداشته باشه.
مواردی از این قبیل رو رعایت کنید تا div کاملا فیت بشه.
سلام
زمانی که عرض یک جدول یا div با 100% تنظیم می کنیم باز هم کمی فاصلی در کنار جدول وجود دارد چه کنیم تا این فاصله از بین برود؟
با سلام.
دقت داشتید عنصر فعلی margin از جهت چپ و راست نداشته باشه. همینطور چک کنید که عنصر پدرش خصوصیت padding از سمت چپ و راست نداشته باشه.
اگر موارد بالا صفر بود، چک کنید که تگ body با مقادیر body{margin:0px ;padding:0px;} /*comment ست شده باشه.
سایتتون خیلی خوبه .
خسته نباشین.
اقا پهلوان صادق واقعا خیلی صبورن و قشنگ جواب میدن.
خسته نباشین
سلام،خسته نباشید
یه سوال داشتم.من برای پیجم یه divکلی تعریف کردم.بعد از اون برای قسمت بالایی پیج یه divگذاشتم.توی این قسمت یه کلمه هست که نقش لوگو رو داره.لینک هامم تو همین قسمت قرار داره.
برای این لوگو و لینک هامم یکی یه دونه div تعریف کردم که در واقع روی div قبلی قرار میگیرن.
حالا وقتی میخوام به لینک ها و اون لوگو paddingبدم همه چی به هم میریزه.
مگه paddingمحتوای داخلdiv رو ترا نمیکنه که از طرفین چقدر فاصله داشته باشه؟
ولی وقتی من paddingمیذارم انگار عرضو ارتفاع divتغییر میکنه و چون فضای کافی ندارن دیگه این دو تا divکنار هم قرار نمی گیرن و به هم میریزه.
لطفا راهنماییم کنین.
سلام دوست عزیز.
کدهاتون برای بررسی بذارید تا بشه فهمید مشکلش از چیه.
با سلام خدمت شما مدیر محترم؛ جناب آقای مهندس پهلوان
یک سوال از حضورتون داشتم:
میدونیم که برخی از تگها مثل div و یا p در حالت پیش فرض حالت block رو دارن. یعنی میان و خط بعد رو میشکونن و اجازه نمیدن که در خطی که واقع شدن عنصر دیگه ای قرار بگیره! میخواستم بدونم آیا اگه به تگی مثل div بیایم و طول رو با دادن width مشخص کنیم، آیا بازهم نیاز هست که از دستورdisplay:inlineاستفاده کنیم یا خیر؟؟ از نظر اعتبار سنجی (استاندارد بودن) بزاریم بهتره یا نه؟؟
ب) کدوم تگهای رایج حالت inline و کدومها حالت block رو دارن؟
سلام، در این مطلب در مورد پس زمینه آموزش هایی ارائه شده، بنابراین اگر سوالاتتون مربوط به مطلب باشه خیلی ممنون می شم ...!
و اما همان طور که خودتون فرمودید، تگ div یک عنصر block است، بنابراین تنظیم width برای آن بی معنی است مگر اینکه آنرا با استفاده از خصوصیت display و مقدار inline تبدیل به یک عنصر inline کنیم.
استفاده کردن یا نکردن از خصوصیت ها فکر نمی کنم ربطی به استاندار بودن صفحه داشته باشد...! با خیال راحت از خصوصیت ها برای برآورده شدن نیازهاتون استفاده کنید.
برای قسمت آخر سوالتون به لینک زیر مراجعه کنید:
www.beyamooz.com/html/137-basic/506
ببخشید
این ترتیبی که برای نوشتن خصوصیات فرمودید
حتی اگر مختصر نویسی نکردیم باید رعایت کرد
خیر، نیازی نیست.
ببخشید من هنوز تو نوشتن url مشکل دارم ، میشه یه توضیح کلی بدید؟
یه سوال دیگه؛ تو مثال گفته شد که واسه ثابت نگه داشتن عکس پس زمینه مقدار background-atta chment رو fixed بذاریم. چه مقادیر دیگه ای میشه به این خصوصیت داد؟
به مثال زیر توجه کنید:
تصور کنید، کل پروژه داخل فولدر Myproject است و داخل این فولدر، فولدر دیگری بنام images وجود داره که تمام عکس های استفاده شده در پروژه داخل اون قرار داره ...
حالا یه فولدر admin داریم که یه فایل HTML به نام test.html داخلشه و می خواهیم برای پس زمینه این فایل با استفاده از خصوصیت background-imag e یه عکس تنظیم کنیم ...! خوب مقداری که تنظیم خواهیم کرد بصورت زیر می شه:background-imag e="../images/bg.jpg"در اینجا چون در فایل test.html هستیم، برای رسیدن به عکسی که داخل پوشه images است، ابتدا باید یک گام به عقب برگردیم تا به ریشه اصلی فولدر Myproject برسیم و بعد وارد پوشه images بشیم
قسمت دوم سوالاتتون: جهت کسب اطلاعات بیشتر در مورد background-atta chment به لینک زیر مراجعه کنید:
www.beyamooz.com/cssref/227-css-properties/743
خسته نیاشد..
با عرض شرمندگی طبق توضیحاتون واسه گذاشتن عکس پس زمینه من همچنان مشکل دارم.کل کارمو میگم بگید مشکل کجاست.من یه پوشه به نام Myproject دارم توی ان یه پوشه به اسم images هست که توی پوشه images عکسام قرار دارد بیرون از پوشه images هم یه فایل indexx.html دارد.حالا واسه گذاشتن پس زمینه یا اصلا وارد کردن یه عکس css اینو گذاشتم ;("background-i mage : url("..images/i mgres.jpg ولی اجرا نمیشه.اینم بگم اگه فایل html و عکسم رو دسکتاب باشن اکی میشه همه چی ولی میخوام تو پوشه باشن.(پوشه myproject رو دسکتاپم هست). خواهشا کمک کنید
با توجه به توضیحات، آدرس دهی عکس پس زمینه اشتباه است ...! مطابق زیر عمل کنید:
style="background-image : url('images/img res.jpg')"
یه منویی طراحی کردم داخل یه دیوو گذاشتم میخوان این منو قسمت پایینی دیوو قرار بگیره تا فضای بالاشو چیز دیگه بزارم.چه خصوصیتی بکار ببرم؟
روی منو، خصوصیت های زیر را تنظیم نمایید:position:absolute;
bottom:0;برای کسب اطلاعات بیشتر درباره خصوصیت position به لینک زیر مراجعه نمایید:
www.beyamooz.com/css/87-advance/292
سلام..
ببخشید چیکار کنیم که گوشه دیوو که درست میکنیم حالت گرد در بیاد
سلام، با استفاده از خصوصیت border-radius می تونید گوشه ها را گرد کنید، برای اطلاعات بیشتر به لینک زیر مراجعه نمایید:
www.beyamooz.com/css3/649
سلام خسته نباشید..
ببخشید کدی از یه سایت دارید که بزارید.هم یه ایده ایجاد میشه واسمون هم جاهای مختلف سایت اشنا میشیم.اگه بزارید ممنون میشم
سلام، ممنون از پیشنهادتون.
در چند روز آینده قسمتی با همین موضوع فعال سازی خواهد شد. البته تحت عنوان "آموزش پروژه محور" ...!
با تشکر از جواباتون..
پست قبلی 2تا مشکل گفتم یکی مشکل فارس بودن بود که حل شد یکی دیگه مشکل اینجاس که کد تو ویرایشگر سایتتون زیرمجموعه منو را نشون میده ولی تو نات پد میزارم بالا میارم ریر مجموعه را نشون نمیده مشکل کجاست؟
اگر کدتون رو به [email protected] بفرستید، بهتر می تونم راهنماییتون کنم ...!
اما برای ساخت منوهای آبشاری، معمولاً از CSS استفاده می شود ولی ممکن است برای متحرک سازی بیشتر از CSS3 استفاده شود که در این صورت ممکن است مرورگر شما خصوصیت های جدید CSS3 را پشتیبانی نکند.
ممنون از راهنماییتون مشکلم حل شد ولی یه مشکل دیگه بوجود اومد. میخوام توی div یه div دیگه بزنم یعنی میخوام یه فضایی با طول و عرض مشخص بزنم که مثلا تبلیغات سایت تو اون کادره بزارم.ولی هر کاری میکنم طول و عرض و نمیشناسه چیکار باید کرد؟
همان طور که می دانید، عنصر div یک عنصر block است، یعنی حتی اگر برای آن خصوصیت width را تنظیم کنید باز، طول سطری که در آن قرار دارد را بصورت کامل به خود اختصاص می دهد.
اما در مقابل عناصر block، عناصر inline وجود دارند که فقط به اندازه ی محتوایی که دارند طول یک سطر را اشغال می کنند (مثل عنصر a یا img)، و اجازه می دهند عناصری که بلافاصله بعد از آنها قرار دارند و البته از نوع inline هستند، در کنارشان قرار گیرند.
خوب حالا برای تبدیل یک عنصر block به inline می توانید از خصوصیت display با مقدار "inline" و یا خصوصیت float با مقدار "right" یا "left" استفاده کنید.
سلام تشکر بابت جواب هایی که میدین..
من تو ویرایشگر سایتتون کدی را نوشتم بعد این کد را در notpad ذخیره کردم و با IE بازش کردم ولی فونت فارسی را پشتیبانی نمیکنه یا منوی سایتم که حالت ابشاری داره باز نمیکنه ولی تو ویرایشگر شما همه چی اکی هست چیکار کنم با IE اکی شه ممنون..
برای ایجاد صفحات HTML با محتوای فارسی، یکی از دوتا کار زیر را انجام دهید:
1- اضافه کردن تگ meta: در قسمت head صفحه، یک تگ meta با ویژگی های زیر اضافه نمایید.
<meta http-equiv="con tent-type" content="text/h tml; charset=utf-8"/>
2- UTF-8: زمانی که می خواهید فایل HTML را در نات پد ذخیره کنید، گزینه encoding را با مقدار UTF-8 تنظیم نمایید.
صفحه را بوسیله div بخش بندی کردم ولی صفحه سمت راست رفته کجا و چی بنویسم کل وب وسط مرورگر قرار گیرد
همان طور که می دانید عنصر div یک عنصر block است، یعنی بدون در نظر گرفتن محتوایش، کل طول یک سطر را اشغال می کند ...! اما اگر خصوصیت flot را با مقدار مثلاً "right" برای آن تنظیم کنیم، به سمت راست شناور شده و اینبار به اندازه ی محتوایش طول سطر را اشغال می کند. البته عناصری که در ادامه آن قرار دارند، بلافاصله بعد از آن قرار می گیرند (برای مزاح، در این حالت div دیگر یک عنصر خودخواه نیست و اجازه می دهد تا دیگر عناصر از سطرش استفاده کنند ...!)
با این مقدمه، اما حالا برگردیم سر سوال دوست خوبمون آقای حسین ...!
حالا که برای استخوان بندی صفحه ات داری از div استفاده می کنی، دوتا حالت برای مشخص کرده اندازه ی div ها پیش رو داری :
1- یک واحد ثابت مثل px : در این صورت اگر div اصلی را با 950px تنظیم کنی ، بصورت پیش فرض کل صفحه در سمت چپ قرار میگیرد و برای وسط چین کرد، خصوصیت margin را برای div اصلی با مقدار "margin: 0 auto" تنظیم کیند.
2- واحد % : در این صورت اگر div اصلی را مثلاً با 90% تنظیم کنی، باز هم به سمت چپ متمایل می شود و باید مانند بالا عمل کنید.
سلام.ادرس عکسها که واسه پس زمینه انتخاب میکنیم فقط اسم عکس بزاریم؟ یا باید اپلود بشه؟ من اسم عکس میزارم نمیشه.backgroun d-image:url('Wi nter.jpg');
سلام، برای مقدار دهی خصوصیت backgroun-image به نکات زیر توجه بفرمایید:
1- این خصوصیت باید با آدرس دقیق عکس مورد نظر، مقدار دهی شود. بنابراین اگر سایت تان روی اینترنت است، عکس شما نیز باید روی اینترنت باشد.
2- تصور کنید عکس های پروژه در شاخه images است و فایل CSS تان در شاخه styles، حالا چطور عکس bg.gif را برای پس زمنیه تنظیم کینم. خیلی راحت ابتدا با استفاده از (/..) یک گام از شاخه styles به عقب برمیگردیم و سپس با (images/) وارد شاخه عکس ها می شویم ... و نهایتاً (images/bg.gif/ ..)
ببخشید این background متوجه نشدم الان میخوام مثلا background سایتم از یه عکسی که تو درایو کامپیوتر هست استفاده کنم اسم عکسم اینه images.jpg اگه میشه بگین چی بنویسم.ممنون
حسین عزیز اجازه بده تا کار رو اصولی انجام بدیم ...!
تصور کن، کل پروژه ات داخل یه فولدر به نام Myproject است و داخل این فولدر یه فولدر دیگه به نام images وجود داره که تمام عکس های استفاده شده در پروژه داخل اون قرار داره ...
حالا یه فولدر admin داریم که یه فایل HTML به نام test.html داخلشه و می خواهیم برای پس زمینه این فایل با استفاده از خصوصیت background-imag e یه عکس تنظیم کنیم ...! خوب مقداری که تنظیم خواهیم کرد بصورت زیر می شه:
"background-imag e="../images/bg.jpg
فقط توجه داشته باش که آدرس دهی، نسبت به مکانی که داخل هستیم انجام می شه، در اینجا چون در فایل test.html هستیم، برای رسیدن به عکسی که داخل پوشه images است، ابتدا باید یک گام به عقب برگردیم تا به ریشه اصلی فولدر Myproject برسیم و بعد وارد پوشه images بشیم و ...
به نقل از hosein:
سلام مقدار پیش فرض برای خصوصیت background-posi tion همان طور که در مطلب زیر گفته شده است 0% 0% است. http://beyamooz.com/cssref/227-css-properties/746-background-posi tion