دستور background-image در css
در این بخش از آموزش CSS از تاپ سایت 98 قصد داریم به آموزش دستور background-image در css بپردازیم. با قرار دادن عکس تمام صفحه ، ترکیب با دستورات background-repeat و background-attachment و غیره آشنا خواهید شد. کدها همه تست شده است.
قرار دادن عکس تمام صفحه
برای قرار دادن عکس تمام صفحه می توانید از دستور background-image استفاده نمایید.
در مثال زیر برای BODY از دستور background-image استفاده کرده ام اگر عکس کوچک باشد آنقدر تکرار می شود که تمام صفحه را بپوشاند.
اگر عکس بزرگی قرار دهید تمام صفحه را می پوشاند.
<html lang="en">
<head>
<title>تاپ سایت 98</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
background-image: url("w2.jpg");
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<a href="https://topsite98.com/">topsite98</a>
</body>
</html>
تکرار نشدن عکس پس زمینه
اگر عکس کوچک باشد تکرار می شود که تمام صفحه را بپوشاند.
برای تکرار نشدن عکس پس زمینه می توانید از دستور background-repeat استفاده کنید و ویژگی آن را no-repeat بگذارید.
background-image: url("w1.jpg");
background-repeat: no-repeat;
}
تکرار عکس پس زمینه در عرض
یک عکس کوچک برای پس زمینه استفاده کنید. مشاهده می کنید که دستور background-image عکس را چندین بار استفاده می کند تا تمام صفحه را بپوشاند.
برای تکرار عکس پس زمینه در عرض می توانید از دستور background-repeat استفاده کنید مشاهده می کنید عکس فقط در جهت x چیده می شود و مابقی پس زمینه سفیدرنگ خواهد بود.
background-image: url("w1.jpg");
background-repeat: repeat-x;
}
تکرار عکس پس زمینه در ارتفاع
یک عکس کوچک برای پس زمینه استفاده کنید. مشاهده می کنید که دستور background-image عکس را بارها تکرار میکند تا تمام صفحه را بپوشاند.
برای تکرار عکس پس زمینه در ارتفاع و در جهت y می توانید از دستور background-repeat و ویژگی repeat-y استفاده کنید مابقی پس زمینه سفیدرنگ خواهد بود.
background-image: url("w1.jpg");
background-repeat: repeat-y;
}
تغییر رنگ پس زمینه
در مثال زیر اگر عکس کوچک باشد قسمتی از صفحه را می پوشاند و بقیه پس زمینه رنگ سفید خواهد بود.
برای تغییر رنگ پس زمینه می توانید از دستور background-color استفاده کرد.
background-image: url("w1.jpg");
background-repeat: repeat-x;
background-color: red;
}
ثابت کردن عکس پس زمینه
یک عکس با سایز 500 در 500 پیکسل یا همین حدود انتخاب کرده و در url دستور background-image قرار دهید.
مقدار background-repeat را no-repeat بگذارید تا عکس پس زمینه تکرار نشود.
رنگ پس زمینه را آبی گذاشته ام.
برای ثابت کردن عکس پس زمینه از دستور background-attachment استفاده کرده ام.
عکس را در موقعیت وسط قرار داده ام.
سایز ارتفاع body را 2000 پیکسل قرار داده ام تا اسکرول فعال شود.
حال مشاهده می کنید با اسکرول کردن صفحه ، عکس پس زمینه ثابت است.
background-image: url("w1.jpg");
background-repeat: no-repeat;
background-color: blue;
background-attachment: fixed;
background-position: center;
height: 2000px;
}
امیدواریم این آموزش برای شما مفید باشد.
برای مشاهده همه آموزش های HTML و CSS کلیک کنید : آموزش کامل CSS - آموزش کامل HTML
موفق باشید.
منبع: تاپ سایت 98
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
-
ناشناس
2022-02-27 18:52:02
با عرض سلام خدمت استاد در قسمت background image عکس های داخل فایل img که درون درایو c داخل پوشه قرار دارد اصلا نمی آورد خواهشمندم راهنمایی بفرمائید با تشکر
سلام. اگر فایل html در پوشه اصلی - فایل style.css در پوشه css و عکس در پوشه img باشد باید به این شکل عمل کرد.
<link rel="stylesheet" media="screen" href="css/style.css" />
و کد داخل css به این شکل است:
body{
background:url(../img/a.jpg);
}
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید