css

Background در CSS – آموزش CSS

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


Background انواع مختلفی دارد :

اول background-color

<div class="nameClass"> </div>

.nameClass{
background-color: red;
height: 100px;
width: 100px;
}

کد بالا به صورت زیر نمایش داده میشود:

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

دوم background-image

<div class="nameclass"></div>

.nameClass{
background-image: url(“img/nameimage.jpg”);
}

کد بالا به صورت زیر نمایش داده میشود:

backgrund

با استفاده از این صفت میتوانید عکسی برای پس زمینه ی سایت انتخاب کنید. برای این منظور باید نام صفت و بعد کلمه ی url نوشته و داخل پرانتز و بین ” ” آدرس و نام و پسوند عکستون رو مشخص کنید. در این جا ما پوشه ای داریم به نام img و داخل این پوشه فایلی بانام nameimage و با پسوند jpg وجود دارد.

سوم background-repeat

<div class="nameclass"></div>

.nameClass{
background-image: url(“img/nameimage.jpg”);
background-size: 200px 100px;
background-repeat: repeat-x;
height: 98px;
}

کد بالا به صورت زیر نمایش داده میشود:

backgrundbackgrundbackgrundbackgrund

با استفاده از این صفت شما مشخص می کنید که عکسی که انتخاب کردید تکرار بشود یا خیر. ما در این جا از repead-x استفاده کردیم . در قسمت مقدار شما چهار ویژگی میتوانید انتخاب کنید:

1- Repeat

این ویژگی می گوید عکس را آن قدر تکرار کن تا تمام صفحه ،هم از لحاظ افقی و هم از لحاظ عمودی تکمیل شود.

2- no Repeat

این ویژگی مشخص میکند که عکس انتخابی اصلا تکرار نشود .

3- Repead-x

مشخص میکند که عکس انتخابی در محور X (افقی) تکرار شود .

4- Repead-y

مشخص میکند که عکس انتخابی در محور Y (عمودی) تکرار شود.

چهارم background-position

.nameClass{
     background-position: left top;
     height: 100px;
     width: 100px;
}

این صفت position یا مکان قرار گیری عکس را مشخص می کند. شما می توانید محل قرار گیری عکس را با یک یا دو ویژگی مشخص کنید.

top – bottom – right – left – center

پنجم background-attachment

.nameClass{
     background-attachment: fixed;
 }

این صفت وابستگی عکس را مشخص میکند. زمانی که fixed را به عنوان ویژگی به آن بدهید عکس در جای مدنظر بدون تکان خوردن و صرف نظر از اندازه ی خود قرار میگیرید.

ویژگی دیگه scroll می باشد این ویژگی باعث می شود در جایی که سایز عکس از اندازه ی دلخواه بزرگتر است به صورت scroll دار نمایش داده شود.

ششم background

.nameClass{
     background: #00ff00 url("nameimg.jpg") no-repeat fixed center;
 } 

امروزه خیلی کم پیش می آید کسی بیاید تک تک صفات (بخش های اول تا پنجم) را بنویسد. شما می توانید با استفاده از این صفت تمامی این بخش ها را در یک خط بنویسید که این باعث می شود هم سرعت بارگزاری سایت بالاتر برود و هم ساده تر می باشد.

Related Articles

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close