اندازه پس زمینه CSS

دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 20 بهمن 1399

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

توضیح اندازه پس زمینه

با استفاده از این ویژگی، می توانید اندازه تصویر پس زمینه سفارشی را تعریف کنید:

div { 
  background: url(https://github.com/bitdegree/banners/blob/master/learn/pom-laptop.png?raw=true);
  background-size: 60px 90px;
}

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

background-size: مقدار؛

div {
  background: url(https://cdn.bitdegree.org/learn/pom-laptop.png?raw=true);
  background-size: 30%;
}

Example	Description	Value
;background-size: auto	مقدار پیش فرض تصویر با حفظ نسبت ابعاد ، مقیاس بندی می شود.	auto
;background-size: cover	تصویر به طور کامل ظرف را پوشانده است ، اما ممکن است کشیده یا بریده شود.	cover
;background-size: contain	ظرف متناسب با تمام تصویر داخل آن است ، اما ممکن است برخی مناطق بدون پوشش باقی بمانند.	contain
;background-size: 700px 500px	دو مقدار به ترتیب عرض و ارتفاع را تعریف می کنند. اگر فقط یکی را تعریف کنید ، مخفف عرض است و ارتفاع به طور پیش فرض خودکار است.	Length units
;background-size: 30%	دو مقدار عرض و ارتفاع را در ارتباط با اندازه تصویر اصلی پس زمینه CSS تعریف می کنند. اگر فقط یک مورد را تعریف کنید ، مقدار آن مخفف width است و ارتفاع به طور پیش فرض خودکار است.	Percentages

توجه: اگر مقادیر را با کاما جدا کنید ، می توانید اندازه تصویر پس زمینه CSS را برای چندین پس زمینه تعریف کنید.

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera و Edge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊