Css

|

اموزش بک گراند

در این مقاله میخواهیم با استفاده از Css صفحه وب خود را زیباتر کنیم و درصفحه پس زمینه یا بک گراند خود را عکس یا رنگ قرار دهیم.

background-color

این مشخصه به ما کمک میکند تا رنگ پس زمینه را مشخص کنیم یا برای مثال میخواهیم قسمتی از متن رنگ پس زمینه داشته باشد.

برای مثال :

<p>متن بدون زمینه. <span style="background-color: yellow">این قسمت زمینه زرد دارد.</span></p>

توجه داشته باشید طبق توضیحاتی که در مقالات گذشتههم دادیم شما میتوانید رنگ را هم به صورت انگلیسی بنویسید هم معادل هگزادسیمال انها استفاده کنید.

background-image

این ویژگی هم کاربردی مشابه با background color دارد با این تفاوت که به جای رنگ میتوانیم عکس در پس زمینه قرار دهیم.

background-image:url (آدرس تصویر مورد نظر)

در اینجا باید ادرس عکس مورد نظر را وارد کنیم.

توجه داشته باشید نیازی نیست بین ( " ) باشد و تنها باید ادرس را بین پرانتز بنویسیم.

حال به توضیحات بیشتری برای پس زمینه یا بک گراند میپردازیم تا شما بتوانید تسلط بیشتری روی عکس و رنگ داشته باشیم.

background-repeat

این نوع مشخصه دارای مقادیر repeat, no-repeat, repeat-x, repeat-y میباشد که باعث میشود عکس در بک گراند به صورت های مختلف تکرار شود.

Repeat : این مقدار تعیین میکند در صورتی که عکس از صفحه مرورگر کوچکتر بود به صورت عمودی و افقی تکرار شود.

No-repeat : این مشخصه تعیید میکند تصویر نباید تکرار شود حتی اگر عکس از مرورگر هم کوچکتر باشد.

Repeat-x : مشخص میکند تصویر باید به صورت افقی تکرار شود.

Repeat-y : مشخص میکند عکس باید به صورت عمودی تکرار شود.

background-attachment

این مشخصه دارای مقادیر scroll, fixed میباشد و مشخص میکند زمانی که با موس اسکرول میکنیم به سمت بالا و پایین عکس بک گراند ثابت باشد یا همراه با اسکرول کردن حرکت کند.

Scroll : اگر این گزینه را انتخاب کنید تصویر زمینه به همراه اسکرول کردن صفحه به بالا و پایین میرود.

Fixed : تصویر زمینه در زمان اسکرول کردن تصویر باید ثابت بماند و حرکت نکند.

background-position

این مشخصه دارای مقادیر top, center, bottom به صورت عددی یا درصدی یا left, center, right به صورت عددی یا درصدی میباشد و با استفاده از این کد میتوانیم موقعیت تصویر را در صفحه مشخص کنیم.

برای استفاده از این دستورات میتوانید از استایل خارجی که در مقالات گذشتهتوضیح داده ایم استفاده کنید و یک استایل در قسمت head درست کنید و این کد ها را در داخل آن قرار دهید.

background-position:top right
این ویژگی تصویر زمینه را در بالا و سمت راست صفحه نمایش می دهد.

background-position:center right
این ویژگی تصویر را در سمت راست وسط صفحه نمایش می دهد.

ackground-position:bottom center
این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد.

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

اموزش css طراحی سایت css

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
نظر بدهید