ورود ثبت نام

background ها در css

background ها در css
به نام خدا در این بخش میخواهیم background ها در css را به شما آموزش دهیم. امید وارم تا این بخش از آموزش را بدون مشکل سپری کرده باشین.امروز میخواهیم تصاویر پس زمینه و رنگ و تغییر اندازه ی آنها را به شما بگوییم. با mosqdevelopers همراه باشید.

background-color

اگر المانی دارید و میخواهید پس زمینه ی آن را رنگ کنید از background-color استفاده کنید.رنگ هایی که این پراپرتی به خود میگیرد از جمله اسم رنگ ، عدد hex رنگ و البته rgb هست:
div{
	background-color: red;
}
div{
	background-color: #f00;
}
div{
	background-color: rgb(255,0,0);
}

background-image

اگر لازم دیدید که رنگ برای یک المان کافی نیست و شما میخواهید یک عکس را به عنوان بک گراند یک المان مشخص کنید از background-image استفاده کنید:
div{
	background-image: url("image1.jpg");
}

در اینجا src همان آدرس عکس یا حتی گیف مورد نظر شماست. در اینجا ما از عکس آموزش جلسه ی 8 استفاده کردیم:

div{
	background-image: url("image1.jpg");
	height: 500px;
}

background-repeat

در اینجا مشاهده میکنید که عکس بعد از تمام شدن ارتفاع دوباره تکرار میشود.این تکرار ادامه پیدا میکند تا ارتفاع المان تمام شود.این تکرار به صورت پیش فرض فعال است و اگر بخواهید آن را غیر فعال کنید از background-repeat استفاده کنید:
div{
	background-image: url("image1.jpg");
	background-repeat: no-repeat;
	height: 500px;
}


لازم به ذکر است که مقدار repeat در جهت x و y هم میتواند تکرار شود یعنی repeat-x و repeat-y.

background-position

اگر اندازه ی تصویر کوچک است و شما میخواهید پوزیشن آن را تغییر دهید از background-position استفاده کنید.هم مقدار عددی میگیرد و هم right - bottom- top - left- center:
div{
	background-image: url("image1.jpg");
	background-repeat: no-repeat;
	background-position: right top;
	height: 500px;
}

background-attachment

و در آخر اگر به فکر چسبیدن عکس در بک گراند هستید و نمیخواهید موقع scroll آن عکس تغییر کند از background-attachment استفاده کنید:
div{
	background-image: url("image1.jpg");
	background-repeat: no-repeat;
	background-position: right top;
	background-attachment: fixed;
	height: 500px;
}

کوتاه شده ی این پراپرتی هم به صورت زیر است:
div{
	background: #f00 url(image1.jpg) no-repeat right top;
}

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

0 331

telegram mosqdevelopers


دسته بندی ها

ios

پست های اخیر

banner

معرفی و کاربرد های مهم زبان برنامه نویسی سی شارپ

در این مقاله درکنار شما هستیم...

ادامه مطلب


banner

کاربردها و فرصت های شغلی زبان برنامه نویسی جاوا

زبان برنامه نویسی جاوا در ا...

ادامه مطلب


banner

دلایل یادگیری و کاربردهای زبان برنامه نویسی پایتون

درود برشما کاربران گرامی در ای...

ادامه مطلب


banner

ساخت جداول گوناگون در css

به نام خدا. در این قسمت میخوا...

ادامه مطلب


banner

کتابخوان های الکترونیکی برتر

به نام خدا ؛ تاحالا شده وقتت ت...

ادامه مطلب


RSS RSS

نظرات ارزشمند خود را در مورد وبسایت با ما در میان بگذارید

© کلیه حقوق مادی و معنوی متعلق به تیم برنامه نویسی Mosquito Network می باشد