i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

خاصیت Background و ویژگی های آن در CSS

css-background

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

خاصیت Background در یک نگاه


خاصیت Background شامل ویژگی هایی است که همگی یک هدف مشترک را دنبال می کنند و آن هم تنظیم پس زمینه صفحه یا عناصر وب به نحو دلخواه است، به طور مثال اگر بخواهیم تصویر پس زمینه مد نظرمان صرفا محور X ها را پوشش دهد ویژگی تحت عنوان background-repeat وجود دارد که می توانیم مقدار آن را به صورت repeat-x تنظیم کنیم، قاعدتا این مقادیر قراردادی و از پیش تعریف شده هستند که در ادامه در خصوص نحوه کاربرد آنها بیشتر توضیح خواهیم داد، برای داشتن دورنمای کلی از خاصیت Background و ویژگی های آن نمونه کد زیر را بررسی می کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | شیوه کلی نگارش ویژگی های Background در CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    background:#093 url('background.gif');
    /*background-image:url('background.gif');*/
    background-attachment:fixed;
    background-color:#069;
    background-position:top;
    background-repeat:repeat-x;
}
.rtl{
    direction:rtl;
}
</style>
</head>
<body>
<hr />
<p class="rtl">
پس زمینه این صفحه در قسمت بالا از تکرار تصویر کوچکی در راستای محور X ها ایجاد شده است (ویژگی background-repeat)، رنگ پس زمینه کل صفحه نیز با مقدار کد هگز 069 در ویژگی background-color تنظیم شده که تگ body یعنی کل صفحه را پوشش می دهد.
<br>
نکته: هرچند مقدار کد هگز 093 در ویژگی background به عنوان رنگ پس زمینه در نظر گرفته شده، اما در ادامه کلاس، مقدار رنگ 069 در ویژگی background-color جایگزین آن شده که در این حالت به دلیل تداخل دو ویژگی یکسان، صرفا مقدار آخر بر اساس قوانین اولویت در CSS غالب می شود.
</p>
</body>
</html>
پیش نمایش
- در کد بالا در صفحه وبی فرضی از خاصیت background و ویژگی های آن استفاده کرده ایم.
- در قسمت مربوط به آدرس دهی تصویر پس زمینه می توان از ویژگی background به صورت کلی (شامل رنگ و آدرس تصویر) یا background-image به صورت جزئی تر (صرفا شامل آدرس تصویر) استفاده کرد.
background:#093 url('background.gif');
/*background-image:url('background.gif');*/
- برای نوشتن یک نکته یا یادداشت در حین کدنویسی CSS از علامت /*متن یادداشت*/ استفاده می کنیم، در کد بالا خط مربوط به ویژگی background-image صرفا جهت جنبه آموزشی به صورت یادداشت درج شده و تاثیری در صفحه ندارد.
- در قسمت مربوط به پارامتر url باید آدرس تصویر را قرار دهیم، این آدرس با توجه به محل قرارگیری فایل می تواند به صورت نسبی یا مطلق باشد.
مثال برای حالت نسبی:
background-image:url('background.gif');
مثال برای حالت مطلق:
background-image:url('https://webgoo.ir/example/css/background.gif');
- در کد بالا تصویری با ابعاد 5 پیکسل در 5 پیکسل آنقدر در راستای محور X ها تکرار می شود تا سطر اول صفحه را به طور کامل پوشش دهد.
- رنگ پس زمینه صفحه را با ویژگی background-color و یک مقدار کد هگز به صورت 069# تنظیم کرده ایم، هگز یک استاندارد رنگی است که در آن هر کد نشانگر یک رنگ بخصوص است، این کدها را می توانیم از طریق برنامه های کدنویسی، برنامه های گرافیکی یا ابزارهای تحت وب پیدا کنیم.
- background-position موقعیت تصویر پس زمینه ما را در صفحه مشخص می کند.
- background-repeat مشخص می کند که نحوه تکرار تصویر پس زمینه در صفحه به چه شکل باشد.
در ادامه  به بررسی جزئی تر هر یک از عناصر فوق می پردازیم.

ویژگی background


این ویژگی می تواند مقادیر رنگی (کد هگز) یا آدرس یک تصویر (نسبی یا مطلق) و یا هر دو مقدار را در خود داشته باشد:
.my-div-background{
    background:#093;
}
یا
.my-div-background{
    background:url('image/imagebackground.png');;
}
یا
.my-div-background{
    background:#093 url('image/imagebackground.png');;
}
برای در نظر گرفتن زمینه شفاف و بی رنگ می توانیم به جای مقدار کد هگز و url از عبارت transparent استفاده کنیم.

ویژگی background-image


در این ویژگی مشابه background آدرس تصویر را به صورت نسبی یا مطلق در قسمت url درج می کنیم و به این صورت تصویر پس زمینه بر روی تگ HTML هدف اعمال می شود، به فرض ممکن است برای یک بلاک div از آن استفاده کنیم و لذا این ویژگی تصویر پس زمینه آن بلاک را شکل دهد:
.my-div-background{
    background-image:url('upload/images/bg-image.jpg');
}
برای نادیده گرفتن ویژگی های background و background-image می توانیم مقدار آنها را عبارت none قرار دهیم.
نکته: در حالت نسبی با توجه به محل قرارگیری فایل تصویر و صفحه وبی که ویژگی background-image در آن به کار می رود آدرس دهی مشخص می شود، به فرض اگر صفحه وب و فایل تصویر هر دو در یک دایرکتوری باشند کافی است در قسمت url نام فایل تصویر با پسوند را درج کنیم (به فرض bg-image.jpg) یا اگر صفحه وب در دایرکتوری اصلی سایت و فایل تصویر در دایرکتوری upload/images باشد، آدرس نسبی تصویر upload/images/bg-image.jpg خواهد بود، در حالت مطلق آدرس کامل تصویر در وب را درج می کنیم یعنی همان آدرسی که اگر در مرورگر درج کنیم فایل تصویر دانلود خواهد شد، حالت مطلق بیشتر برای مواقعی است که فایل تصویر از یک سایت دیگر در صفحه وبمان بارگذاری می شود یا اینکه بخواهیم به هر دلیل فایل ها به صورت مطلق آدرسی دهی شوند (به فرض برای رعایت کپی رایت یا در موارد ضرورت های برنامه نویسی و...)، در مثال بالا آدرس تصویر به صورت دایرکتوری (نسبی) درج شده است.

ویژگی background-attachment


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

ویژگی background-position


ویژگی background-position موقعیت تصویر پس زمینه را در محلی که استفاده شده مشخص می کند، به فرض اگر بخواهیم تصویر خود را متمایل به سمت راست قرار دهیم باید از background-position با مقدار right استفاده کنیم، مثال:
.my-div-background{
    background-position:right;
}
.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>
<!-- https://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 مطالب بیشتر:
» کار با ویژگی position و float در CSS
» کاربرد خاصیت display در CSS
» کار با ویژگی margin و padding در css
» نحوه تنظیم لینک (link) در استایل css
» مقدمه ای بر 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 لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

8 × 7
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

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

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)
سامانه استخدام ایران
Iran-karyab.com

اطلاع رسانی استخدام های معتبر دانلود رایگان نمونه سئوالات