parsgreen.com
article

کار با Backgrounds و ویژگی های آن در CSS

css-background

بعد از آشنایی نسبی با css، تعریف کلاس (class) و آی دی (ID)، نوبت به فراگیری تنظیمات مربوط به Backgrounds در CSS است، خوشبختانه CSS قابلیت های تقریبا کاملی در این خصوص دارد و هرآنچه که در طراحی وب فکرش را بکنیم با کد های آن دست یافتنی است، در ادامه خواهیم گفت که چگونه می توانید پس زمینه یا Background صفحات، لایه ها و المان های مورد نظر خود را با ویژگی های color، image، repeat، attachment و position به زیبایی شکل دهید و از آنها به طور سفارشی استفاده کنید.

شیوه نگارش کلی این عنصر و زیرمجموعه های آن به شکل زیر است:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | شیوه کلی نگارش عناصر background در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    background:url(background.gif);
    /*background-image:url(background.gif);*/
    background-attachment:fixed;
    background-color:#069;
    background-position:top;
    background-repeat:repeat-x;
}
</style>
</head>
<body>
</body>
</html>
پیش نمایش
توضیح:
- در کد بالا صفحه ای فرضی را با عناصر background شکل داده ایم.
- در قسمت مربوط به عکس پس زمینه می توان از background به صورت پیش فرض یا background-image به صورت حرفه ای تر، استفاده کرد.
- برای نوشتن یک نکته یا یادداشت در حین کدنویسی css از علامت /*یادداشت*/ استفاده می کنیم.
- در قسمت مربوط به url باید آدرس دایرکتوری (یا آدرس کامل تصویری که آپلود می کنید) را به همراه نام کامل فایل (با پسوند) قرار دهید.
- در کد بالا ما تصویری با ابعاد 5 پیکسل در 5 پیکسل را آنقدر در راستای محور x ها تکرار کرده ایم که سطر اول صفحه را به طور کامل پوشش داده است.
- رنگ پس زمینه صفحه را با background-color و یک مقدار هگز که به صورت 069# مشخص است، تنظیم کرده ایم.
- background-position موقعیت تصویر پس زمینه ما را در صفحه مشخص می کنید.
- background-repeat نیز مشخص می کند که نحوه تکرار شدن تصویر پس زمینه در صفحه به چه شکل باشد.
حال به بررسی جزئی تر هر یک از عناصر فوق می پردازیم.

عنصر background:


این عنصر می تواند مقادیر رنگی (هگز) یا آدرس یک تصویر را در خود داشته باشد:
.my-div-background{
    background:#093;
}
برای حالت های شفاف می توان از مقادیر transparent استفاده کرد.

عنصر background-image:


آدرس یک تصویر را به صورت url در خود دارد، این قابلیت، تصویر پس زمینه ما را با توجه به زیرمجموعه ای که در آن تعریف شده است، مشخص می کند، به فرض ممکن است در یک بلاک div از آن استفاده کنیم و لذا این عنصر تصویر پس زمینه آن بلاک را شکل می دهد:
.my-div-background{
    background-image:url(bgimage.jpg);
}
برای نادیده گرفتن این قابلیت مقدار آن را none قرار می دهند.

عنصر background-attachment:


background-attachment به مرورگر می گوید که آیا تصویر پس زمینه با اسکرول صفحه، اسکرول شود یا خیر، اگر مقادیر آن را fixed قرار دهید، در صفحاتی که ارتفاع آنها از صفحه نمایش کاربر بیشتر است، نوار اسکرول کناری نمایش داده می شود و اگر کاربر به پائین یا بالای صفحه برود، تصویر پس زمینه در جای خود بدون تغییر و ثابت خواهد بود (این تکنیکی است که در برخی از قالب های وبلاگ ها نیز مشاهده می شود):
.my-div-background{
    background-attachment:fixed;
}
مقادیر دیگر این عنصر scroll است که حالت پیش فرض می باشد.

عنصر background-position:


background-position موقعیت تصویر پس زمینه ما را در محلی که استفاده شده، مشخص می کند، به فرض اگر بخواهیم تصویر خود را از سمت راست شروع به نمایش کنیم، باید از مقدار background-position:right استفاده کنیم؛ مثالی دیگر:
.my-div-background{
    background-position:bottom;
}
.my-div-background2{
    background-position:bottom left;
}
مقادیر این عنصر به صورت bottom، top، left، right و center است که قابلیت استفاده از دو خاصیت را به طور همزمان در خود دارد (به طور مثال background-position:top right).

عنصر background-repeat:


این عنصر برای مشخص کردن نحوه تکرار تصویر پس زمینه در صفحه به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود یا برعکس بخواهیم که تمام پس زمینه را پوشش دهد، بدین منظور از این عنصر و خاصیت های آن استفاده می کنیم:
.my-div-background2{
    background-repeat:repeat-y;
}
مقادیر background-repeat به صورت repeat ،no-repeat، repeat-x و repeat-y تعریف می شود.
این بخش را با یک مثال کمی پیشرفته تر به پایان می بریم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | شیوه پیشرفته استفاده از عناصر background در css</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    background-color:transparent;
    height:1000px;
}
.bgdiv{
    background-image:url(background.gif);
    background-repeat:repeat;
    background-position:bottom;
    background-attachment:scroll;
    background-color:#F90;
    height:400px;
    width:600px;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>
<div class="bgdiv">
</div>
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» نحوه تنظیم لیست با تگ ul li در css
» آشنایی با کلاس (class) و آی دی (id) در css
» کار با ویژگی position و float در CSS
» کاربرد خاصیت height و width در css
» کار با ویژگی margin و padding در css
commentنظرات (۲۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: sajad
زمان: ۱۳:۰۷:۳۱ - تاریخ: ۱۳۹۱/۰۷/۰۵
میشه بگید که این کد ها رو چجوری یا با چه نرم افزاری می نویسند
پاسخ: 
با تسلط بر css و به کمک نرم افزارهایی مانند aptana
http://www.aptana.com
یا نرم افزار قوی Adobe Dreamweaver می توانید کدهای مربوط به برنامه نویسی وب را بنویسید و ویرایش نمائید.
نویسنده: علیرضا
زمان: ۰۲:۱۲:۳۶ - تاریخ: ۱۳۹۲/۰۴/۱۴
سلام. اگه بخوایم background سایت رو یه خورده دورش کنیم. الان خیلی جلو هستش انگار توی عکس زوم کرده.
باید چیکار کنم؟ البته فقط background دور بشه نه خوده سایت.
پاسخ: 
سلام
به نظر باید فایل PSD لوگو یا پس زمینه را ویرایش و اندازه های ارتفاع و عرض را کاهش دهید
نویسنده: مصطفی
زمان: ۱۷:۱۲:۲۱ - تاریخ: ۱۳۹۲/۰۷/۲۹
چطور میشه اگه یه عکسی رو به عنوان بکگراند تصویر با css قرار دادیم باز روی اون با css عکس معمولی قرار بدیم
پاسخ: 
برای این کار باید از لایه های تو در تو استفاده کنید، به فرض اگر برای یک تگ div پس زمینه تنظیم کنید، باید برای تنظیم مجدد آن برای رسیدن به هدف مورد نظر، یک تگ div دیگر، درون آن تعریف کنید و به آن نیز پس زمینه بدهید.
نویسنده: سعید
زمان: ۱۵:۵۳:۰۴ - تاریخ: ۱۳۹۲/۰۹/۲۴
من میخوام از این سبک عکس ها را برای بک گروند استفاده کنم می خواستم ببینم اسم این نوع عکس ها چیه چون pattern هم نیستن. سایتی میدونین که این عکس ها رو برای دانلود داشته باشه؟ یا نرم افزار خاصی برا تولیدشون هست؟
http://upload7.ir/images/52778364969924989835.gif
مثل این که با سبک shadow هم میشه به اینترنت اکسپلورر داد. حجمشم خیلی کمه.
پاسخ: 
این نوع تصاویر را المان های طراحی وب (Background Image) می گویند، تا آنجا که اطلاع داریم هیچ منبع استانداردی برای ارائه این نوع تصاویر وجود ندارد لذا
برای دریافت آنها باید در وب (در سایت های گرافیکی) جستجو کنید یا اینکه با نرم افزارهای گرافیکی (مانند فتوشاپ) موارد مد نظرتان را بسازید (به نظر کار وقت گیری خواهد بود!).
نویسنده: محسن
زمان: ۰۴:۰۵:۲۱ - تاریخ: ۱۳۹۲/۱۱/۰۸
ممنون از سایت خوبتون
من برای اینکه عکس بکگراند سایتم با تمام مانیتورها سازگار بشه background-size رو بصورت درصدی 100 درصد وارد کردم و کنارش هم از backgroun-attachment:fixed استفاده کردم که عکس کامل طول و عرض صفجه رو پوشش بده ولی مشکلی که دارم اینه که وقتی اندازه ی مرورگر رو کوچک کنم عکس بکگراند هم کوچک میشه و عناصر صفحه بهم میریزن چطور میتونم این مشکل رو حل کنم یا اینکه راه دیگه ی وجود داره واسه سازگاری اندازه ی بکگراند با مانیتورای مختلف
پاسخ: 
در وب استاندارد خاصی برای اندازه تصویر پس زمینه وجود ندارد، از آنجایی که اندازه صفحه نمایش های مختلف متفاوت است، طراحان معمولا استاندارد مانیتورهای CRT (قدیمی) و LED (عریض) را انتخاب می کنند، یعنی طوری عکس پس زمینه را تنظیم می کنند که در مانیتورهای 17 اینچ تا حدودی و در مانیتورهای عریض به طور کامل دیده شود، البته امروزه اکثر سایت های حرفه ای یا از رنگ برای پس زمینه استفاده می کنند یا از تکرار تصاویر پیکسلی با همپوشانی.
نویسنده: amir
زمان: ۱۴:۴۶:۲۱ - تاریخ: ۱۳۹۳/۰۱/۱۵
حرف ندارید اما تو رو خدا یکم بهتر و مفهومی تر توضیح بدید
پاسخ: 
برخی مباحث نیاز به داشتن اطلاعات پایه و مقدماتی دارند، واقعا قابل ساده تر سازی از این بیشتر نیستند!
نویسنده: مژگان
زمان: ۲۱:۳۷:۰۲ - تاریخ: ۱۳۹۳/۰۴/۰۲
من میخوام پیج سایت بینگ رو طراحی کنم عکسی رو برای بک گروند گذاشتم اما در صفحه اسکرول عمودی و افقی دارم که این در واقع نباید باشه. ابعاد عکس رو با فتوشاپ کوچکتر کردم اما بازم تغییری نکرد میاد همون عکس کوچک رو میکشه تو کل صفحه که فقط باعث بی کیفیتی عکس شد. چکار کنم که اسکرول نداشته باشه؟
همین طور اگه شما bing.com برین و ببینین فوتر هم داره من اومدم از تگ فوتر استفاده کردم دایو اضافی تعریف نکردم براش اما این فوتر کمی از حاشیه فاصله داره که در واقع نباید فاصله ای باشه برای هدر هم این فاصله بود که با margin صفر حلش کردم اما برای فوتر نمیشه . میشه راهنماییم کنین؟
پاسخ: 
برای حذف حاشیه های پیش فرض باید margin و padding تگ body را صفر تنظیم کنید:
body{
margin:0px;
padding:0px;
}
برای حذف اسکرول لطفا در وب جستجو کنید، اما در مورد تصویر زمینه، دقت کنید که بزرگ یا کوچک بودن تصویر پس زمینه هیچ نقشی در اسکرول ندارد، این اندازه و ویژگی های بلاک مربوطه است که باعث اسکرول و... می شود، تصویر پس زمینه در دل بلاک جای می گیرد و هرچقدر هم بزرگ باشد، به فضای بیرون از بلاک خود اثری نمی گذارد.
نویسنده: Najme
زمان: ۱۵:۱۸:۳۱ - تاریخ: ۱۳۹۳/۰۵/۱۵
سلام میخواستم یک عکس تو سایتم بزارم که این عکس وقتی موس میره روش عکس من رنگش تغیر میکنه یعنی کلا در حد 20px بالاتر از عکسم رو نشون بده کسی میدونه css مربوط به این رو؟؟؟؟؟؟؟؟
پاسخ: 
سلام
برای این کار بهتر است از جاوا اسکریپت یا پلاگین های جی کئوری استفاده کنید، با این حال نمونه کد CSS3 در این خصوص:
http://jsfiddle.net/27Syr/1206
نویسنده: ELham
زمان: ۲۲:۲۰:۵۷ - تاریخ: ۱۳۹۳/۰۶/۰۹
سلام. یه سوال: چرا وقتی من از کد
!doctype html
استفاده میکنم لینک مربوط به body منو در CSS تشخیص نمیده
پاسخ: 
سلام
مشکل شما ممکن است علت های مختلفی داشته باشد و بدون بررسی سورس صفحه امکان ارائه پاسخ نیست!
نویسنده: torang
زمان: ۲۰:۳۴:۳۵ - تاریخ: ۱۳۹۳/۰۷/۲۵
عالی بود متشکر
نویسنده: مریم
زمان: ۱۴:۳۴:۳۷ - تاریخ: ۱۳۹۳/۰۸/۰۷
سلام ممنون از مطالب مفید شما
من یک سوال دارم قالب سایتی که دارم طراحی می کنم در قسمتی از صفحه یک تصویر وجود دارد که منوهای من روی این تصویر می باشند من کدی بصورت زیر در css نوشته ام ولی منوهای من زیر عکس می آید نه روی عکس با اینکه در div های تو در تو آنرا نوشتم
<div id="all"> <!----BEGIN OF ALL---->
<!------Begin logo------>
<div id="logo">
<img src="image/logo.png" />
</div>
<!-----End of logo------>
<div id="background for menu">
<img src="image/background for menu.png"/>
<div id="menu"
<img src="image/menu.png"/>
</div>
</div>
</div><!----End of All---->
لطفا من را راهنمایی فرمایید بدجور گیر کردم
پاسخ: 
سلام
برای اینگونه طراحی باید بر CSS و خاصیت هایی مانند position با مقادیر absolute و relative مسلط باشید، در این صورت می توانید یک بلاک والد (با مقادیر relative) داشته باشید و سایر عناصر را به صورت تابعی از آن و با مقادیر absolute تعریف کنید.
نویسنده: نفس اصولی
زمان: ۱۲:۵۰:۲۲ - تاریخ: ۱۳۹۳/۰۸/۰۹
با عرض سلام و خسته نباشید و با تشکر از سایت مفیدتون.... من آشنایی خیلی کمی با css دارم و توی قالب وبلاگم که آدرسش رو وارد کردم میخواستم بک گراندم رو کاری کنم که با کوچک شدن سایز صفحه اونم کوچک بشه.... چیکار باید بکنم؟ تو html اگه ارتفاع و عرض رو به % وارد کنیم درست میشه اما در css زدم نشد... چیکار باید بکنم؟
ممنون میشم راهنمایی کنید چون همین مشکل باعث شده که قالبم تو گوشی و تبلت درست بالا نیاد و بهم ریخته باشه و منم تا قبل از اینکه متوجه این موضوع باشم فکر میکردم بخاطر همگام نبودن قالب با گوشی هست که اینجوری میشه و در آخر چون به نتیجه نرسیدم واسه وبلاگم نسخه موبایل زدم که اصلا دوستش ندارم....
body{margin:0;font-family: Tahoma;background:#000000;background:url(http://s5.picofile.com/file/8129622276/back4.jpg); }
پاسخ: 
سلام
تصویر پس زمینه (تنظیم شده با CSS) به خودی خود هیچ نقشی در بهم ریختن قالب وبلاگ ندارد و صرفا ممکن است اندازه آن از صفحه نمایش بزگتر باشد که در این صورت بخشی از آن مخفی می شود، متاسفانه راه حل ساده ای برای رفع این مشکل (مخفی شدن تصویر پس زمینه در صفحه نمایش های کوچک) وجود ندارد، به همین دلیل در طراحی قالب های وب، کمتر از پس زمینه هایی به صورت تصویر ثابت استفاده می شود، راه حل استاندارد این است که قالبتان با پس زمینه های تکرار شونده (ناشی از تکرار و همپوشانی تصاویر خیلی کوچک در کنار هم) ایجاد شود یا اینکه نسخه موبایل داشته باشید.
نکته: در استایل نویسی حرفه ای CSS روش هایی وجود دارد که یک تصویر پس زمینه به ظاهر عریض از ترکیب چندین قسمت مختلف به وجود می آید، درک این شیوه نیازمند تجربه بالا در طراحی قالب و گرافیک وب است.
نویسنده: صادق
زمان: ۱۶:۰۹:۵۴ - تاریخ: ۱۳۹۴/۰۳/۰۶
سلام، من میخوام عکس بکگراند هم افقی و هم عمودی تکرار بشه. باید چیکار کنم؟
لطفا راهنمایی کنید. تشکر
پاسخ: 
سلام
باید در قسمت استایل CSS خود برای ویژگی background-repeat از مقدار repeat استفاده کنید.
نویسنده: داوود
زمان: ۲۰:۰۴:۰۲ - تاریخ: ۱۳۹۴/۰۳/۱۶
سلام آقای مهندس؛ در کدی که برای دوستمون Najme و به این آدرس گذاشتین:
http://jsfiddle.net/27Syr/1206
اولا خاصیت display:block کاربردش برای تگ img این هستش که اگه بخواد عنصری در کنارش قرار بگیره، مشکلی نداشته باشه؟؟ یعنی از حالت inline خارجش کردین در واقع؟؟ تگ img بصورت default بصورت inline هست؟
این تکه از کد چیکار میکنه، چون با تغییر مقادیرش تو مرورگر فایرفاکس تغییری حاصل نشد در نمایش صفحه:
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(500); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
پاسخ: 
سلام
- مثال ذکر شده برای کاربر مربوط به محتوای آموزشی موجود در سایت های دیگر است.
- تگ img به صورت پیش فرض در حالت inline-block پردازش می شود، مقدار block باعث می شود دو طرف عنصر پاک سازی شود (شبیه مقدار both برای خاصیت clear در CSS)، البته شاید در اینجا تاثیری نداشته باشد و صرفا سلیقه ای یا از باب عادت درج شده! اما اگر محتوا در کنار تصویر وجود داشته باشد، مقدار block باعث clear شدن دو طرف تصویر می شود.
- تنظیمات اضافه ای که درج شده اند برای سازگاری برخی ویژگی های جدید CSS با نسخه های قدیمی مرورگرها است.
نویسنده: داوود
زمان: ۰۸:۴۸:۴۹ - تاریخ: ۱۳۹۴/۰۳/۱۷
سلام آقای مهندس، صبحتون بخیر.
در خصوص background که درس امروزمون بود، برای نمونه من میخواستم header سایت p30download رو انجامش بدم. فقط زیرمنویی که حالت گرادیانت رو داره اومدم و بردمش تو فتوشاپ، و یه خوردش رو گرفتم که زیاد نشه؛ مسیر عکسی که ایجاد کردم رو تو این مسیر گذاشتم:
http://s3.picofile.com/file/8192408568/undermenu.png
و اینهم کد زنده حاصل از اجرای کدها + عکس بالایی:
http://www.cssdesk.com/2LkKB
میخواستم ببینم الان دیگه کدها رو درست زدم؟؟ از نظر بلاک بندی و اینکه مثلا clear نذاشتم، اشکالی نداره؟ عرض رو هم 100% دادم که کل فضای wrapper یا main اصلی رو پوشش بده.
.undermenu{
background-image:url(http://s3.picofile.com/file/8192408568/undermenu.png);
background-repeat:repeat-x;
width:100%;
height:50px;
}
<div class="undermenu">
</div>
پاسخ: 
سلام
استفاده از ویژگی های CSS بسته به نیاز و هدف ما است و به خودی خود هیچ اجباری به کاربرد یک ویژگی خاص وجود ندارد، اما از آنجایی که در طراحی قالب های کاربردی معمولا باید از ساختار بلاک های تو در تو استفاده کرد، بسته به شرایط ممکن است یک ویژگی نظیر clear استفاده شود که این به جهت تنظیم دقیق بلاک ها و تشکیل فرم مورد نظر ما ممکن است نیاز باشد، در کل طراحی وب را باید به تدریج و به همین سبک مورد به مورد فرا بگیرید تا در نهایت با کسب تجربه لازم بتوانید یک قالب حرفه ای (یعنی بتوانید ایده ذهنی را به راحتی به نتیجه HTML + CSS تبدیل کنید) طراحی کنید.
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 9
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...