مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش تنظیمات تصویر پس زمینه در css بپردازیم. در پست های آموزشی قبلی css ، چگونگی کار با رنگ ها در css را بررسی کردیم. و تعریف رنگ برای عناصر مختلف html باروشهای مختلف را آموزش دادیم. در css شما می توانید مانند انتخاب رنگ برای عناصر html ، تصویر پس زمینه برای عناصر html تعریف کنید.و اندازه ، شکل قرارگیری ، کشیدگی و … را تنظیم کنید.
در صورتی که از کاربران تازه وارد بود و اطلاعات کمی در مود css دارید ، می توانید پست آموزشی ساختار کد نویسی css را جهت آشنایی بهتر، بررسی کنید. در ادامه این پست به آموزش تنظیمات تصویر پس زمینه در css می پردازیم.
css- تنظیمات تصویر پس زمینه در css
تنظیمات تصویر پس زمینه در css
در css با ویژگی background-image می توانید یک پس زمینه برای عناصر html تعریف کنید. در حال پیش فرض، تصویر مرتب تکرار می شود و کل عنصر را پوشش می دهد. شما به سادگی می توانید یک تصویر پس زمینه برای کل صفحه وب تعریف کنید. برای این کار باید کد css را برای بخش body فایل html تعریف کنید.
خواص پس زمینه CSS برای تعریف جلوه های پس زمینه برای عناصر استفاده می شود.
خواص پس زمینه در CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
رنگ پس زمینه
در CSS از خصوصیت background-color برای مشخص کردن رنگ پس زمینه در عناصر HTML استفاده می شود.
رنگ پس زمینه ی یک صفحه ی HTML به صورت زیر تنظیم می شود :
در CSS سک رنگ اغلب با ویژگی های زیر تنظیم می شود :
- یک نام رنگ معتبر مانند “red”
- یک مقدار HEX مانند “#ff0000”
- یک مقدار RGB مانند “(rgb(255,0,0)”
در مثال زیر به عناصر <h1>, <p> و <div> هر کدام یک پس زمینه ی جداگانه اعمال شده است:
مثال : اعمال پس زمینه
| h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } |
تصویر پس زمینه
از ویژگی background-image در CSS برای اعمال تصویر به عنوان پس زمینه یک عنصر استفاده می شود.
به طور پیش فرض، تصویر تکرار می شود و کل عنصر را پوشش می دهد.
تصویر پس زمینه برای یک صفحه می تواند مانند این تنظیم شود:
مثال : اعمال پس زمینه روی عناصر HTML
| body { ;("background-image: url("paper.gif } |
در زیر یک نمونه از ترکیب بد متن و تصویر پس زمینه است. متن به سختی قابل خواندن است:
نکته: هنگام استفاده از یک تصویر پس زمینه،از تصویری استفاده کنید که متن عنصر را محو نکند.
تنظیم تکرار پس زمینه بطور عمودی یا افقی
ویژگی background-image این امکان را می دهد که تصویر پس زمینه را بصورت عمودی یا افقی در عنصر html تکرار کنید.(بعضی از تصاویر باید عمودی باشند و بعضی افقی).
برخی از تصاویر باید فقط به صورت افقی یا عمودی تکرار شوند، و یا گاهی مانند نمونه نمایی جالب پیدا می کنند:
تکرار افقی تصویر
برای تنظیم افقی تصویر باید از کد (;background-repeat: repeat-x ) بعد از آنکه تصویر زمینه را تعیین کردید، استفاده کنید.
مثال:
مثال :
| body { ("background-image: url("gradient_bg.png ;background-repeat: repeat-x } |
تکرار عمودی تصویر
برای تنظیم عمودی تصویر باید از کد (;background-repeat: repeat-y ) بعد از آنکه تصویر زمینه را تعیین کردید، استفاده کنید.
مثال:
مثال :
| body { ;("background-image: url("gradient_bg.png ;background-repeat: repeat-y } |
غیر فعال کردن تکرار شدن تصویر
برای لغو تکرار شدن تصویر در پس زمینه، باید از کد ( ;background-repeat: no-repeat ) بعد از تعیین کردن تصویر پس زمینه، استفاده کنید.
مثال:
مثال : غیر فعال کردن تکرار تصاویر
| body { ;("background-image: url("img_tree.png ;background-repeat: no-repeat } |
تعیین محل قرار گیری تصویر در عناصر html
برای مشخص کردن محل قرار گرفتن تصویر پس زمینه در عنصر html مربوطه، باید از ویژگی background-position بعد از مشخص کردن تصویر پس زمینه، استفاده کنید.
مثال: تنظیم کردن تصویر پس زمینه ی عنصر html در بالا سمت راست:
مثال : تعیین موقعیت تصاویر
| body { ;("background-image: url("img_tree.png ;background-repeat: no-repeat ;background-position: right top } |
Fix (ثابت) کردن تصویر پس زمینه در عناصر
در css می نوانید پس از تعیین تصویر پس زمینه عنصر مورد نظر و تعیین محل قرارگیری ، آن را ثابت کنید (به این معنا که با scroll کردن صفحه، تصویر جابه جا نمی شود). اینکار با ویژگی background-attachment و دادن مقدار fixed به آن انجام می شود.
مثال:
مثال : ثابت کردن موقعیت تصاویر
| body { ;("background-image: url("img_tree.png ;background-repeat: no-repeat ;background-position: right top ;background-attachment: fixed } |
شما می توانید تمام موارد فوق و مواردی دیگر را در یک خط دستوری در css خلاصه کنید. مثال:
مثال : خلاصه کردن کدها
| body { ;background: #ffffff url("img_tree.png") no-repeat right top } |
زمانیکه می خواهید تمام خصوصیات را مانند مثال فوق در یک انتساب خلاصه کنید، از ترتیب زیر در نوشتن مقادیر ویژگی ها استفاده کنید:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
مهم نیست اگر یکی از مقادیر فوق را نادیده بگیرد، چرا که مقدار بعدی اجرا می شود.
خصوصیات background در CSS
| خصوصیت | توضیحات |
|---|
| background | تمام خصوصیات زمینه را در یک اعلامیه تنظیم می کند. |
| background-attachment | تعیین می کند که آیا یک تصویر پس زمینه ثابت یا با بقیه صفحه قابل اسکرول است. |
| background-clip | مشخص کننده زمینه نقاشی پس زمینه است. |
| background-color | رنگ پس زمینه یک عنصر را تعیین می کند. |
| background-image | تصویر پس زمینه یک عنصر را تعیین می کند. |
| background-origin | تعریف می کند که در آن تصویر پس زمینه (ها) قرار گرفته است یا خیر. |
| background-position | موقعیت پس زمینه موقعیت شروع یک تصویر پس زمینه را تنظیم می کند. |
| background-repeat | پسزمینه تکرار یک تصویر پس زمینه را تکرار می کند. |
| background-size | اندازه پس زمینه اندازه تصویر پس زمینه را تعیین می کند. |
کلام آخر
یکی از قابلیت های مهم و بسیار پر کاربرد در CSS تعیین پس زمینه است، پس زمینه هم می توان شامل رنگ ها باشد و هم شامل تصاویر مختلف، که در این آموزش ما هم چگونگی تعیین تصویر پس زمینه در CSS و هم تعیین رنگ پس زمینه در CSS را نیز بررسی کردیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
ه
سلام ببخشید اگر بخوام یه غکسی رو بدم پشت منو ها
منوهایی که از کد های بوت استرپ استفاده کردم باید چیکار کنم؟
صادق
سلام. از خاصیت background-image استفاده کنید.
#navigation,.navbar .navbar-default{
background-image: url("img/flower.jpg");
}