پس زمینه ها (آموزش CSS جلسه چهارم)
سلام و درود به شما دوستان عزیز و همراهان گرامی مِستر آموز.
با یک جلسه دیگر از آموزش CSS در مِستر آموز در خدمت شما هستیم. در این جلسه قصد داریم نحوه استایل دادن به پس زمینه ها را به شما دوستان عزیز آموزش دهیم. با ما همراه باشید.
Background:
Background به معنی پس زمینه می باشد. از خاصيت پس زمينه در CSS برای تعيين يک رنگ يا تصوير به عنوان پس زمينه يک عنصر مثل جدول يا صفحه استفاده می شود.
background-color:
از این خاصیت برای تعیین یک رنگ برای پس زمینه ها استفاده می شود. و با 3 روش زیر رنگ بندی می شود.
• ذکر نام رنگ
• با تابع rgb
• در مبنای 16 هگزاد سيمال
این 3 روش رنگبندی را در جلسه سوم بصورت کامل توضیح داده ایم. در صورتی که جلسه سوم را مطالعه نکرده اید، می توانید به آن مراجعه کرده و بخش COLOR را بخوانید و با این 3 روش آشنا شوید.
اکنون اگر بخواهیم برای پس زمینه یک صفحه رنگی اختصاص دهیم، می توانیم از 3 روش نوشتن استایل استفاده کنیم، این 3 روش را نیز در جلسه دوم توضیح داده ایم.
ما اینجا از روش نوشتن استایل در خود عنصر می خواهیم استفاده کنیم.
<body style="background-color:#09C"> <br><p><br> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش <br></p><br> </body>
خروجی:
background-image:
با این خاصیت می توانیم یک عکس برای پس زمینه در نظر بگیریم. و باید مسیر کامل یک عکس را قرار دهیم. به مثال زیر دقت کنید:
<body style="background-image:url(CSS.jpg)"> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> </body>
خروجی:
دقت داشته باشید که در کد بالا و در نوشتن آدرس تصویر در صورتی که فایل و تصویر در یک مسیر باشند. فقط نام تصویر را می نویسید. اما در صورتی که تصویر در مسیر دیگری باشد، باید آدرس کامل را بنویسید.
به این صورت:
<body style="background-image:url(Image/CSS-part-1.jpg)>
همانطور که در تصویر بالا میبینید، تصویری که به عنوان پس زمینه گذاشتیم، به دلیل اینکه اندازه آن کوچک است، تکرار می شود. هم به صورت افقی و هم بصورت عمودی تصویر در حال تکرار شدن هست تا کل صفحه را پر می کند. اگر میخواهیم تکرار شدن تصویر را مدیریت کنید باید از خصوصیت background-repeat استفاده کنید.
background-repeat:
با استفاده از این خاصیت می توانیم تعیین کنیم که تصویر پس زمینه تکرار نشود ، فقط افقی تکرار شود یا فقط عمودی تکرار شود.
• repeat: تصویر تکرار شود. که انتخاب پيش فرض است.
• repeat-x: فقط در جهت محورها x ها يعنی افقی تکرار خواهد شد.
• repeat-y: فقط در جهت محور y ها يعنی عمودی تکرار خواهد شد.
• no-repeat: تصویر در هيچ جهتی تکرار نخواهد شد.
به مثال زیر دقت کنید:
<body style="background-image:url(Image/CSS-part-1.jpg); background-repeat:repeat-y; "> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> </body>
خروجی:
background-attachement:
با این خاصیت می توانید تعیین کنید که با حرکت عنصر هنگام بالا و پایین رفتن صفحه، تصویر ثابت بماند یا با صفحه حرکت کند. و با دو مقدار زیر تعیین می شود:
• scroll : عکس با حرکت عنصر حرکت می کند .
• fixed : عکس ثابت بوده و با حرکت عنصر حرکت نمی کند .
مثال:
<body style="background-image:url(Image/CSS-part-1.jpg); background-repeat:no-repeat; background-attachment:scroll; "> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> <p> در مِستر آموز می باشد CSS این جلسه چهارم از آموزش </p> </body>
خروجی:
با این حالت اسکرول بار را که به سمت پایین بکشیم، عکس همان بالا می ماند و حرکت نمی کند.
background-position:
محل قرار گیری تصویر را تعیین می کند. با 5 حالت زیر مقدار دهی می شود:
• top : تصویر بالای عنصر قرار می گیرد.
• bottom : تصویر پايين عنصر قرار می گیرد.
• center : در مرکز عنصر.
• left : سمت چپ عنصر.
• right : سمت راست عنصر.
نکته:
تمام خصوصیات پس زمینه برای هر نوع عنصری کابرد دارند، جداول ، فرم ها ، متون و هر چیزی که در HTML وجود دارد می توانید این خصوصیات را به آن اختصاص دهید.
موفق و سربلند باشید.
