Background در CSS

Background در CSS

توسط / CSS / چهارشنبه, 21 تیر 1396 ساعت 17:01

در این بخش به عکس یا رنگ پس زمینه می پردازیم. برای این که عکس یا رنگی را برای صفحه ی خودتون انتخاب کنید می توانید از صفت 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");
}

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

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

 

سوم background-repeat

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

.nameClass{
background-image: url("img/nameimage.jpg");
background-size200px 100px;
background-repeat: repeat-x;
height98px;
}

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

 

 

با استفاده از این صفت شما مشخص می کنید که عکسی که انتخاب کردید تکرار بشود یا خیر. ما در این جا از 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;

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

نویسنده

حسین منتظرتبریزی

حسین منتظرتبریزی

دانشجوی رشته ی نرم افزار علاقه مند به برنامه نویسی ،بازی سازی و طراحی سایت

نظر

  • سعید سعید 26 تیر 1396

    بسیار عالی

نظر دادن

جهت شرکت در دوره  رایگان  7 اصل مدیریت مطلوب کسب و کار لطفا نام و ایمیل خود را وارد نمایید


ایران آکادمی را در شبکه های مجازی دنبال کنید:

کلیه حقوق مادی و معنوی این وب سایت متعلق به ایران آکادمی می‌باشد. قوانین این وب سایت، مبتنی بر قوانین جاری جمهوری اسلامی ایران است. © ۱۳۹۶

Please publish modules in offcanvas position.