لوگو دویکس
ورود / ثبت نام
افزودن تصویر پس زمینه در CSS

افزودن تصویر پس زمینه در CSS

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

با ویژگی افزودن تصویر پس زمینه در CSS آشنا می شویم.

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

ویژگی CSS-background-image به شما امکان می دهد تصویری را تعیین کنید که به عنوان پس زمینه عنصر مورد استفاده قرار گیرد:

body { 
  background-image: url(https://cdn.bitdegree.org/learn/pom-laptop.png?raw=true);
}

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

body { 
  background-image: url(https://cdn.bitdegree.org/learn/pom-laptop.png?raw=true),
    url(https://cdn.bitdegree.org/learn/space%20gif.gif?raw=true);
}

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

نحو برای تصویر پس زمینه در CSS

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

background-image: مقدار؛

مقادیر موجود در جدول زیر ذکر شده است:

ExampleDescriptionValue
بدون تصویر (مقدار پیش فرض)none
(url(image.jpgتعریف منبع برای یک تصویرURL
(linear-gradient (yellow, greenیک شیب خطی از یک رنگ در بالا به دیگری در پایینlinear-gradient
(linear-gradient (yellow, greenیک شیب شعاعی از یک رنگ در مرکز به رنگ دیگر در لبه هاradial-gradient

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

پشتیبانی از مرورگر

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

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

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

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