دستور background-image در css

از دستور BACKGROUND-IMAGE برای تغییر پس زمینه عناصر استفاده می شود.

در مثال زیر با استفاده از یک عکس زمینه صفحه را تغییر دادم.

چنانچه قصد دارید از عکس برای تغییر پس زمینه صفحه استفاده نمایید از عکس های خیلی کوچک استفاده نمایید .

در کل این راه را پیشنهاد نمی کنم. سعی نمایید از رنگ ها برای تغییر پس زمینه استفاده نمایید.

حتما به ترکیب رنگ ها توجه نمایید. متن باید کاملا قابل خواندن باشد و کاربر براحتی بتواند محتوای صفحه را ببیند.

یک تصویر با نام a.jpg در کنار فایل قرار دهید و سپس فایل را اجرا کنید.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
body {
background-image: url("a.jpg");
}
</style>
</head>
<body>
<h1>sh711.com</h1>
</body>
</html>

دستور BACKGROUND-REPEAT

از دستور BACKGROUND-REPEAT برای تکرار عکس در محور X,Y استفاده می شود.

بصورت پیش فرض عکس در محور X,Y تکرار می شود تا کل عنصر را بپوشاند.

ولی می توانیم از دستور BACKGROUND-REPEAT مشخص کنیم آیا مایل به تکرار عکس در پس زمینه هستیم یا خیر؟

در مثال پایین عکس فقط در محور X تکرار می شود.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
body {
background-image: url("a.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>sh711.com</h1>
</body>
</html>

no-repeat

مقدار no-repeat باعث می شود که عکس فقط یکبار چاپ شود.

هر کدام از مقادیر در جایی کاربرد دارد.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
body {
background-image: url("a.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>sh711.com</h1>
</body>
</html>

تعیین مکان عکس پس زمینه با background-position :

با استفاده از دستور background-position می توانیم مکان عکس را مشخص نماییم.

در مثال پایین می گوییم عکس در بالا و سمت راست قرار بگیرد.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<style>
body {
background-image: url("a.jpg");
background-repeat: no-repeat;
background-position: top right;
}
</style>
</head>
<body>
<h1>sh711.com</h1>
</body>
</html>

دستور background-attachment :

می توانیم مشخص نماییم مکان عکس پس زمینه با اسکرول خوردن صفحه حفظ شود یا خیر.

حالت پیش فرض background-attachment: scroll;

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

خلاصه نویسی دستور background :

در مثال زیر می بینید که می توان بجای نوشتن چندین دستور ، همه را در یک دستور خلاصه نمود.

body { background: #ffffff url("img_tree.png") no-repeat right top; }

نویسنده : هدایت عباسی

تگ ها : آموزش css
عضویت طلایی
ثبت نظر