سبد خرید (0)

تبلیغات

فرمت دهی پس زمینه در CSS

تغییر رنگ و تصویر پس زمینه در CSS

Wiki

خصوصیات مربوط به پس زمینه در CSS برای کار با پس زمینه یک عنصر استفاده می شوند.

این خصوصیات عبارتند از:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

رنگ پس زمینه

Wiki

خصوصیت background-color رنگ پس زمینه یک عنصر را مشخص می کند.

در مثال زیر رنگ پس زمینه در گزینشگر body تنظیم شده است:

مثال (فرمت دهی پس زمینه در CSS)

body {background-color:#b0c4de;}
خودتان امتحان کنید »

در CSS رنگ به یکی از روش های زیر مشخص می شود:

  • name: نام رنگ باید مشخص شود مانند "red"
  • RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
  • Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

در مثال زیر رنگ های پس زمینه مختلف برای عناصر h1 و p و div تنظیم شده است:

مثال (فرمت دهی پس زمینه در CSS)

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
خودتان امتحان کنید »

نمایش یک عکس در پس زمینه

Wiki

خصوصیت background-image یک عکس را به عنوان پس زمینه برای یک عنصر مشخص می کند.

به صورت پیش فرض عکس در محور X و Y تکرار می شود و تمام پس زمینه عنصر مورد نظر را می پوشاند.

در مثال زیر یک عکس به عنوان پس زمینه تنظیم شده است:

مثال (فرمت دهی پس زمینه در CSS)

body {background-image:url('paper.gif');}
خودتان امتحان کنید »

مثال زیر یک ترکیب نامناسب از پس زمینه و متن را نشان می دهد. متن تقریباً ناخواناست:

مثال (فرمت دهی پس زمینه در CSS)

body {background-image:url('bgdesert.jpg');}
خودتان امتحان کنید »

تکرار عکس در محور X و Y

Wiki

اگر تکرار عکس تنظیم نشود، به صورت پیشفرض عکس مورد نظر در دو محور X و Y تکرار خواهد شد.

بعضی مواقع یک عکس باید فقط در محور X و یا فقط در محور Y تکرار شود، در مثال زیر عکس به طور پیشفرض در دو محور X و Y تکرار شده است:

مثال (فرمت دهی پس زمینه در CSS)

body
{
background-image:url('gradient2.png');
}
خودتان امتحان کنید »

اگر عکس مثال قبل، فقط در محور X تکرار شود، پس زمینه بهتری خواهیم داشت.

مثال (فرمت دهی پس زمینه در CSS)

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
خودتان امتحان کنید »

تنظیم مکان عکس پس زمینه

Wiki

توجه: زمانی که از عکس پس زمینه استفاده می کنید، توجه داشته باشید که عکس مورد نظر باعث ناخوانایی متن نشود.

در مثال زیر با تنظیم خصوصیت background-repeat با مقدار "no-repeat" عکس پس زمینه فقط یکبار نمایش داده می شود.

مثال (فرمت دهی پس زمینه در CSS)

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
خودتان امتحان کنید »

در مثال بالا، عکس پس زمینه و متن در یک مکان قرار گرفته اند و این امر باعث ناخوانایی متن شده است.

مکان عکس پس زمینه یک عنصر، با خصوصیت background-position مشخص می شود:

مثال (فرمت دهی پس زمینه در CSS)

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
خودتان امتحان کنید »

مختصر نویسی - پس زمینه

Wiki

همانطور که در مثال های بالا مشاهده کردید، برای تنظیم پس زمینه، با خصوصیات زیادی سروکار داریم.

برای کوتاه تر شدن کد، این امکان وجود دارد که همه خصوصیات مربوط به پس زمینه را در یک خصوصیت مشخص کنیم، این کار به اصطلاح مختصر نویسی نامیده می شود.

در CSS از خصوصیت "background" برای مختصر نویسی پس زمینه استفاده می شود:

مثال (فرمت دهی پس زمینه در CSS)

body {background:#ffffff url('img_tree.png') no-repeat right top;}
خودتان امتحان کنید »

ترتیب مقادیر باید به صورت زیر باشد:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.


Examples

مثال - خودتان امتحان کنید

Wiki

چگونه عکس پس زمینه را ثابت کنیم
این مثال نشان خواهد داد که اگر صفحه Scroll داشت، حتی اگر به سمت پایین حرکت کردیم عکس پس زمینه در جای خود ثابت باشد.

مثال پیشرفته
در این مثال از CSS پیشرفته استفاده شده است، لطفاً نگاهی به آن بیندازید.


کلیه خصوصیات مربوط به پس زمینه

Wiki

خصوصیت توضیحات
background

کلیه خصوصیات مربوط به پس زمینه را در یک مرحله تنظیم می کند.

background-attachment

مکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه

background-color

رنگ پس زمینه یک عنصر را تنظیم می کند.

background-image

عکس پس زمینه یک عنصر را تنظیم می کند

background-position

مکان عکس پس زمینه یک عنصر را تنظیم می کند

background-repeat

چگونگی تکرار عکس پس زمینه یک عنصر را تنظیم می کند


فیلم آموزش CSS

در فیلم آموزشی زیر، می توانید مطالب گفته شده در بالا را مشاهده نمایید:

برای خرید پکیج کامل فیلم آموزش CSS روی لینک روبرو کلیک فرمایید: فیلم آموزش CSS

دیدگاه‌ها  

+1 # علی65 1394-12-09 02:05
سلام
وقتی عرض یک div را برابر 100% قرار میدیم از بالا و کنار div فاصله ایجاد میشه چطوری این فاصله رو حذف کنیم.ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-12-10 21:07
با سلام.
دقت کنید عنصر بالایی اون div خاصیت padding نداشته باشه، و همینطور خود div خاصیت margin نداشته باشه.
مواردی از این قبیل رو رعایت کنید تا div کاملا فیت بشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # amin 1394-08-20 19:29
سلام
زمانی که عرض یک جدول یا div با 100% تنظیم می کنیم باز هم کمی فاصلی در کنار جدول وجود دارد چه کنیم تا این فاصله از بین برود؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-20 19:59
با سلام.
دقت داشتید عنصر فعلی margin از جهت چپ و راست نداشته باشه. همینطور چک کنید که عنصر پدرش خصوصیت padding از سمت چپ و راست نداشته باشه.

اگر موارد بالا صفر بود، چک کنید که تگ body با مقادیر body{margin:0px ;padding:0px;} /*comment ست شده باشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # Hossein68 1394-08-12 17:40
سایتتون خیلی خوبه .
خسته نباشین.
اقا پهلوان صادق واقعا خیلی صبورن و قشنگ جواب میدن.
خسته نباشین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # م.ح 1394-05-10 14:00
سلام،خسته نباشید
یه سوال داشتم.من برای پیجم یه divکلی تعریف کردم.بعد از اون برای قسمت بالایی پیج یه divگذاشتم.توی این قسمت یه کلمه هست که نقش لوگو رو داره.لینک هامم تو همین قسمت قرار داره.
برای این لوگو و لینک هامم یکی یه دونه div تعریف کردم که در واقع روی div قبلی قرار میگیرن.
حالا وقتی میخوام به لینک ها و اون لوگو paddingبدم همه چی به هم میریزه.
مگه paddingمحتوای داخلdiv رو ترا نمیکنه که از طرفین چقدر فاصله داشته باشه؟
ولی وقتی من paddingمیذارم انگار عرضو ارتفاع divتغییر میکنه و چون فضای کافی ندارن دیگه این دو تا divکنار هم قرار نمی گیرن و به هم میریزه.
لطفا راهنماییم کنین.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # مهرداد صلاحی 1394-08-12 20:50
سلام دوست عزیز.
کدهاتون برای بررسی بذارید تا بشه فهمید مشکلش از چیه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # داوود 1393-12-14 10:35
با سلام خدمت شما مدیر محترم؛ جناب آقای مهندس پهلوان
یک سوال از حضورتون داشتم:
میدونیم که برخی از تگها مثل div و یا p در حالت پیش فرض حالت block رو دارن. یعنی میان و خط بعد رو میشکونن و اجازه نمیدن که در خطی که واقع شدن عنصر دیگه ای قرار بگیره! میخواستم بدونم آیا اگه به تگی مثل div بیایم و طول رو با دادن width مشخص کنیم، آیا بازهم نیاز هست که از دستورdisplay:inlineاستفاده کنیم یا خیر؟؟ از نظر اعتبار سنجی (استاندارد بودن) بزاریم بهتره یا نه؟؟
ب) کدوم تگهای رایج حالت inline و کدومها حالت block رو دارن؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-12-16 11:05
سلام، در این مطلب در مورد پس زمینه آموزش هایی ارائه شده، بنابراین اگر سوالاتتون مربوط به مطلب باشه خیلی ممنون می شم ...!
و اما همان طور که خودتون فرمودید، تگ div یک عنصر block است، بنابراین تنظیم width برای آن بی معنی است مگر اینکه آنرا با استفاده از خصوصیت display و مقدار inline تبدیل به یک عنصر inline کنیم.
استفاده کردن یا نکردن از خصوصیت ها فکر نمی کنم ربطی به استاندار بودن صفحه داشته باشد...! با خیال راحت از خصوصیت ها برای برآورده شدن نیازهاتون استفاده کنید.
برای قسمت آخر سوالتون به لینک زیر مراجعه کنید:
www.beyamooz.com/html/137-basic/506
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # raghb 1393-12-12 23:52
ببخشید
این ترتیبی که برای نوشتن خصوصیات فرمودید
حتی اگر مختصر نویسی نکردیم باید رعایت کرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-12-13 17:03
خیر، نیازی نیست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Marjan 1393-11-30 18:57
ببخشید من هنوز تو نوشتن url مشکل دارم ، میشه یه توضیح کلی بدید؟
یه سوال دیگه؛ تو مثال گفته شد که واسه ثابت نگه داشتن عکس پس زمینه مقدار background-atta chment رو fixed بذاریم. چه مقادیر دیگه ای میشه به این خصوصیت داد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1393-12-02 07:59
به مثال زیر توجه کنید:
تصور کنید، کل پروژه داخل فولدر 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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # hossein007 1393-11-07 15:59
خسته نیاشد..
با عرض شرمندگی طبق توضیحاتون واسه گذاشتن عکس پس زمینه من همچنان مشکل دارم.کل کارمو میگم بگید مشکل کجاست.من یه پوشه به نام Myproject دارم توی ان یه پوشه به اسم images هست که توی پوشه images عکسام قرار دارد بیرون از پوشه images هم یه فایل indexx.html دارد.حالا واسه گذاشتن پس زمینه یا اصلا وارد کردن یه عکس css اینو گذاشتم ;("background-i mage : url("..images/i mgres.jpg ولی اجرا نمیشه.اینم بگم اگه فایل html و عکسم رو دسکتاب باشن اکی میشه همه چی ولی میخوام تو پوشه باشن.(پوشه myproject رو دسکتاپم هست). خواهشا کمک کنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-11-08 07:57
با توجه به توضیحات، آدرس دهی عکس پس زمینه اشتباه است ...! مطابق زیر عمل کنید:
style="background-image : url('images/img res.jpg')"
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # hossein007 1393-10-29 16:02
یه منویی طراحی کردم داخل یه دیوو گذاشتم میخوان این منو قسمت پایینی دیوو قرار بگیره تا فضای بالاشو چیز دیگه بزارم.چه خصوصیتی بکار ببرم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-10-30 08:25
روی منو، خصوصیت های زیر را تنظیم نمایید:position:absolute;
bottom:0;
برای کسب اطلاعات بیشتر درباره خصوصیت position به لینک زیر مراجعه نمایید:
www.beyamooz.com/css/87-advance/292
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # hossein007 1393-10-29 09:32
سلام..

ببخشید چیکار کنیم که گوشه دیوو که درست میکنیم حالت گرد در بیاد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-10-29 15:04
سلام، با استفاده از خصوصیت border-radius می تونید گوشه ها را گرد کنید، برای اطلاعات بیشتر به لینک زیر مراجعه نمایید:
www.beyamooz.com/css3/649
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # hossein007 1393-10-28 16:39
سلام خسته نباشید..

ببخشید کدی از یه سایت دارید که بزارید.هم یه ایده ایجاد میشه واسمون هم جاهای مختلف سایت اشنا میشیم.اگه بزارید ممنون میشم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-10-29 08:49
سلام، ممنون از پیشنهادتون.
در چند روز آینده قسمتی با همین موضوع فعال سازی خواهد شد. البته تحت عنوان "آموزش پروژه محور" ...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # hossein007 1393-10-27 11:32
با تشکر از جواباتون..
پست قبلی 2تا مشکل گفتم یکی مشکل فارس بودن بود که حل شد یکی دیگه مشکل اینجاس که کد تو ویرایشگر سایتتون زیرمجموعه منو را نشون میده ولی تو نات پد میزارم بالا میارم ریر مجموعه را نشون نمیده مشکل کجاست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-10-27 13:54
اگر کدتون رو به [email protected] بفرستید، بهتر می تونم راهنماییتون کنم ...!
اما برای ساخت منوهای آبشاری، معمولاً از CSS استفاده می شود ولی ممکن است برای متحرک سازی بیشتر از CSS3 استفاده شود که در این صورت ممکن است مرورگر شما خصوصیت های جدید CSS3 را پشتیبانی نکند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # hossein007 1393-10-27 16:16
ممنون از راهنماییتون مشکلم حل شد ولی یه مشکل دیگه بوجود اومد. میخوام توی div یه div دیگه بزنم یعنی میخوام یه فضایی با طول و عرض مشخص بزنم که مثلا تبلیغات سایت تو اون کادره بزارم.ولی هر کاری میکنم طول و عرض و نمیشناسه چیکار باید کرد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-10-28 08:37
همان طور که می دانید، عنصر div یک عنصر block است، یعنی حتی اگر برای آن خصوصیت width را تنظیم کنید باز، طول سطری که در آن قرار دارد را بصورت کامل به خود اختصاص می دهد.
اما در مقابل عناصر block، عناصر inline وجود دارند که فقط به اندازه ی محتوایی که دارند طول یک سطر را اشغال می کنند (مثل عنصر a یا img)، و اجازه می دهند عناصری که بلافاصله بعد از آنها قرار دارند و البته از نوع inline هستند، در کنارشان قرار گیرند.
خوب حالا برای تبدیل یک عنصر block به inline می توانید از خصوصیت display با مقدار "inline" و یا خصوصیت float با مقدار "right" یا "left" استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # hossein007 1393-10-24 08:07
سلام تشکر بابت جواب هایی که میدین..

من تو ویرایشگر سایتتون کدی را نوشتم بعد این کد را در notpad ذخیره کردم و با IE بازش کردم ولی فونت فارسی را پشتیبانی نمیکنه یا منوی سایتم که حالت ابشاری داره باز نمیکنه ولی تو ویرایشگر شما همه چی اکی هست چیکار کنم با IE اکی شه ممنون..
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-10-25 16:43
برای ایجاد صفحات 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 تنظیم نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # hossein007 1393-10-21 15:40
صفحه را بوسیله div بخش بندی کردم ولی صفحه سمت راست رفته کجا و چی بنویسم کل وب وسط مرورگر قرار گیرد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # امیر پهلوان صادق 1393-10-22 08:46
همان طور که می دانید عنصر div یک عنصر block است، یعنی بدون در نظر گرفتن محتوایش، کل طول یک سطر را اشغال می کند ...! اما اگر خصوصیت flot را با مقدار مثلاً "right" برای آن تنظیم کنیم، به سمت راست شناور شده و اینبار به اندازه ی محتوایش طول سطر را اشغال می کند. البته عناصری که در ادامه آن قرار دارند، بلافاصله بعد از آن قرار می گیرند (برای مزاح، در این حالت div دیگر یک عنصر خودخواه نیست و اجازه می دهد تا دیگر عناصر از سطرش استفاده کنند ...!)
با این مقدمه، اما حالا برگردیم سر سوال دوست خوبمون آقای حسین ...!
حالا که برای استخوان بندی صفحه ات داری از div استفاده می کنی، دوتا حالت برای مشخص کرده اندازه ی div ها پیش رو داری :
1- یک واحد ثابت مثل px : در این صورت اگر div اصلی را با 950px تنظیم کنی ، بصورت پیش فرض کل صفحه در سمت چپ قرار میگیرد و برای وسط چین کرد، خصوصیت margin را برای div اصلی با مقدار "margin: 0 auto" تنظیم کیند.
2- واحد % : در این صورت اگر div اصلی را مثلاً با 90% تنظیم کنی، باز هم به سمت چپ متمایل می شود و باید مانند بالا عمل کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # hossein007 1393-10-20 16:52
سلام.ادرس عکسها که واسه پس زمینه انتخاب میکنیم فقط اسم عکس بزاریم؟ یا باید اپلود بشه؟ من اسم عکس میزارم نمیشه.backgroun d-image:url('Wi nter.jpg');
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-10-21 08:07
سلام، برای مقدار دهی خصوصیت backgroun-image به نکات زیر توجه بفرمایید:
1- این خصوصیت باید با آدرس دقیق عکس مورد نظر، مقدار دهی شود. بنابراین اگر سایت تان روی اینترنت است، عکس شما نیز باید روی اینترنت باشد.
2- تصور کنید عکس های پروژه در شاخه images است و فایل CSS تان در شاخه styles، حالا چطور عکس bg.gif را برای پس زمنیه تنظیم کینم. خیلی راحت ابتدا با استفاده از (/..) یک گام از شاخه styles به عقب برمیگردیم و سپس با (images/) وارد شاخه عکس ها می شویم ... و نهایتاً (images/bg.gif/ ..)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # hossein007 1393-10-29 09:49
ببخشید این background متوجه نشدم الان میخوام مثلا background سایتم از یه عکسی که تو درایو کامپیوتر هست استفاده کنم اسم عکسم اینه images.jpg اگه میشه بگین چی بنویسم.ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-10-29 15:15
حسین عزیز اجازه بده تا کار رو اصولی انجام بدیم ...!
تصور کن، کل پروژه ات داخل یه فولدر به نام Myproject است و داخل این فولدر یه فولدر دیگه به نام images وجود داره که تمام عکس های استفاده شده در پروژه داخل اون قرار داره ...
حالا یه فولدر admin داریم که یه فایل HTML به نام test.html داخلشه و می خواهیم برای پس زمینه این فایل با استفاده از خصوصیت background-imag e یه عکس تنظیم کنیم ...! خوب مقداری که تنظیم خواهیم کرد بصورت زیر می شه:
"background-imag e="../images/bg.jpg
فقط توجه داشته باش که آدرس دهی، نسبت به مکانی که داخل هستیم انجام می شه، در اینجا چون در فایل test.html هستیم، برای رسیدن به عکسی که داخل پوشه images است، ابتدا باید یک گام به عقب برگردیم تا به ریشه اصلی فولدر Myproject برسیم و بعد وارد پوشه images بشیم و ...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-03-12 11:00
به نقل از hosein:

سلام شما از background-posi tion استفاده کردید ولی به right و top مقداری ندادید این مقادیر چگونه محاسبه مشند ایا صفر در نظر گرفته میشند

سلام مقدار پیش فرض برای خصوصیت background-posi tion همان طور که در مطلب زیر گفته شده است 0% 0% است. http://beyamooz.com/cssref/227-css-properties/746-background-posi tion
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن