آموزش css - قسمت پنجم(Backgrounds)

سلام

با پنجمین قسمت از آموزش Css در خدمتتون هستیم؛ در این قسمت خواهیم پرداخت به پس زمینه یا Background ها در css؛ در ادامه همراه بپرسم باشید.

آموزش:

Background(پس زمینه) یکی از خواص پرکابرد css می باشد که از این خاصیت برای تعریف افکت های پس زمینه ی عناصر HTML استفاده می کنیم، در واقع هنگامی که بخوایم برای پس زمینه صفحه یک تصویر یا بخوایم رنگی را برای یکی از عناصر در نظر بگیریم از این خاصیت استفاده میکنیم.

حال خاصیت Background دارای دارای ۵ ویژگی است، که این ۵ ویژگی عبارتند از:

background-color
background-image
background-repeat
background-attachment
background-position

که در ادامه به توضیح هر ویژگی می پردازیم.

background-color

از Background-color برای تغییر رنگ پس زمینه استفاده می شود.

مثال: رنگ پس زمینه یک صفحه HTML

body {
    background-color: lightblue;
}

body {

background-color: lightblue;

}

کد بالا را برای تگ body خود در قسمت کدهای css قرار دهید و نتیجه را مشاهده کنید.

برای رنگ دهی به عناصر HTML توسط Css از شیوه های زیر می توانیم استفاده کنیم:

به کار بردن نام رنگ، مثل blue
نوشتن مقدار هگزادسیمال(HEX)، مثل ff0000
نوشتن مقدار RGB، مثل RGB(255,0,0)

که در جلسه قبلی انواع شیوه های رنگ دهی را توضیح دادیم، برای مشاهده آموزش رنگ ها در Css کلیک کنید.

از ویژگی background-color می توانیم برای دیگر عناصر HTML نظیر تگ های p,h1 to h6,div و … استفاده کنیم.

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

۱۰

۱۱

h1 {

background-color: green;

}

div {

background-color: lightblue;

}

p {

background-color: yellow;

}

برای هر عنصری که خواستید رنگ اعمال شود، کافیست برای تگ مورد نظر در قسمت css از ویژگی background-color استفاده کنید.

background-image

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

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

مثال: گذاشتن یک تصویر برای پس زمینه

body {
    background-image: url("beporsam_back.png");
}

body {

}

مطلب پیشنهادی: جست‌وجو در لیست ویو بدون دیتابیس B4A

در کد بالا یه جای beporsam_back.png نام و آدرس تصویر خود را قرار دهید.

برای چگونگی آدرس دادن تصاویر، این آموزش را مطالعه نمایید.

background-repeat

به طور پیشفرض تصویر به هر دو صورت عمودی(verticall) و افقی(horizontall) تکرار می شود.

برای تغییر تکرار تصویر به صورت Vertical یا Horizontall به صورت زیر می بایست از ویژگی background-repeat در کنار background-image به صورت زیر استفاده کنید.

body {
    background-image: url("beporsam_back.png");
    background-repeat: repeat-x;
}

body {

background-repeat: repeat-x;

}

برای تکرار تصویر به صورت افقی از background-repeat: repeat-x و برای تکرار به صورت عمودی از background-repeat: repeat-y استفده کنید.

Background Image – Set position and no-repeat

در صورتی که بخواهیم تصویر زمینه تکرار نشود از background-repaet به صورت زیر استفاده می کنیم:

body {
    background-image: url("beporsam_back.png");
    background-repeat: no-repeat;
}

body {

background-repeat: no-repeat;

}

با استفاده از background-repaet تصویر زمینه یک بار فقط نمایش داده می شود و تکرار تصویر زمینه غیر فعال می شود.

با background-position می توانیم محل قرار گیری تصویر را مشخص کنیم، در مثال زیر محل قرار گیری تصویر را مشخص کردیم:

body {
    background-image: url("beporsam_back.png");
    background-repeat: no-repeat;
    background-position: right top;
}

body {

background-repeat: no-repeat;

background-position: right top;

}

در مثال بالا گفتیم تصویر را در سمت راست و بالا قرار بگیرد(right top) می توانیم به right top از left top,center top و … استفاده کنیم.

Background Image – Fixed position

همچنین می توانیم تصویر زمینه را ثابت کنیم، منظور از ثابت کردن این است تصویر را ثابت می کنیم به طوری که هنگام اسکرول کردن صفحه به سمت پایین یا بالا، تصویر هم حرکت کند، برای این کار مقدار background-attachment را مساوری fixed قرار میدهیم.

body {
    background-image: url("beporsam_back.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

body {

background-repeat: no-repeat;

background-position: right top;

background-attachment: fixed;

}

برای درک بهتر ثابت بودن تصویر، کدهای زیر را در یک سند HTML ذخیره و نتجیه را مشاهده کنید.

مطلب پیشنهادی: سورس کد اندروید Android Recipe App - جاوا

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("beporsam_back.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
    background-attachment: fixed;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>

</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-position: right top;

margin-right: ۲۰۰px;

background-attachment: fixed;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>If you do not see any scrollbars, try to resize the browser window.</p>

</body>

</html>

مطلب پیشنهادی: آموزش مقدماتی اکسل – قسمت ششم(پیمایش در صفحه)

در کد بالا به جای beporsam_back.png آدرس تصویر خود را جایگزین کنید.

تمامی خواص Background

ویژگی	توضیح
background	کلیه خصوصیات مربوط به پس زمینه را در یک مرحله تنظیم می کند.
background-attachment	ثابت کردن تصویر هنگام اسکرول کردن صفحه
background-color	تنظیم رنگ پس زمینه
background-image	تنظیم تصویر پس زمینه
background-position	محل قرار گیری تصویر
background-repeat	چگونگی تکرار پس زمینه

آموزش این بخش نیز به پایان رسید، امیدوارم مفید بوده باشه:)

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

موفق باشید.

آموزش css – قسمت پنجم(Backgrounds)

درباره احمد آخوندیمدیر سایت

ارسال نظر

عضویت در سایت

ورود

فراموشی رمز عبور

ورود

عضویت در سایت

آموزش css – قسمت پنجم(Backgrounds)

آموزش css – قسمت پنجم(Backgrounds)

درباره احمد آخوندیمدیر سایت

ارسال نظر

مطالب مشابه

تگ های HTML – تگ object

تگ های HTML – تگ wbr

تگ های HTML – تگ video

تگ های HTML – تگ var

فاصله بین خطوط در Css

سامانه آموزشی و خدماتی بپرسم

اولین وب سایت آموزشی و پرسش و پاسخ در ایران