ورود ثبت نام

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 273

telegram mosqdevelopers


دسته بندی ها

ios

پست های اخیر

banner

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

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

ادامه مطلب


banner

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

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

ادامه مطلب


banner

مدل باکس در css

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

ادامه مطلب


banner

padding ها در css

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

ادامه مطلب


banner

background ها در css

به نام خدا در این بخش میخواه...

ادامه مطلب


RSS RSS

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