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

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

css-background

بعد از آشنایی اولیه با CSS، تعریف کلاس (Class) و آی دی (ID)، نوبت به فراگیری ویژگی های مربوط به خاصیت Background در این زبان است، Background از جمله اولین خاصیت هایی است که در هنگام طراحی صفحات وب از آن استفاده می کنیم چرا که می تواند نقطه شروع طراحی ظاهر رابط کاربری ما باشد و به نوعی رنگ بندی پایه پروژه را مشخص کند، خوشبختانه قابلیت های CSS در این خصوص تقریبا کامل و بدون نقص است و هرآنچه که در طراحی وب مورد انتظار ما باشد با کدهای آن دست یافتنی است، در ادامه خواهیم گفت که چگونه می توانیم پس زمینه یا Background صفحات، لایه ها و المان های مورد نظر خود را با ویژگی های background-color ،background-image ،background-repeat ،background-attachment ،background-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:#099 url('background.gif');
    /*background-image:url('background.gif');*/
    background-attachment:fixed;
    background-color:#C69;
    background-position:top;
    background-repeat:repeat-x;
}
.rtl{
    direction:rtl;
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<p class="rtl">
پس زمینه این صفحه در قسمت بالا از تکرار تصویر کوچکی در راستای محور X ها ایجاد شده است (ویژگی background-repeat)، رنگ پس زمینه کل صفحه نیز با مقدار کد هگز C69 در ویژگی background-color تنظیم شده که تگ body یعنی کل صفحه را پوشش می دهد.
<br>
نکته: هرچند مقدار کد هگز 099 در ویژگی background به عنوان رنگ پس زمینه در نظر گرفته شده، اما در ادامه کلاس، مقدار رنگ C69 در ویژگی background-color جایگزین آن شده که در این حالت به دلیل تداخل دو ویژگی یکسان، صرفا مقدار آخر بر اساس قوانین اولویت در CSS غالب می شود.
</p>
</body>
</html>
پیش نمایش
- در کد بالا در صفحه وبی فرضی از خاصیت background و برخی ویژگی های آن استفاده کرده ایم، به غیر از موارد استفاده شده در مثال بالا، ویژگی های background-size، background-clip و background-origin نیز بر حسب موقعیت و نیاز قابل استفاده هستند که در ادامه در خصوص آنها بیشتر خواهیم گفت.
- در قسمت مربوط به آدرس دهی تصویر پس زمینه می توان از ویژگی background به صورت کلی (شامل رنگ و آدرس تصویر) یا background-image به صورت جزئی تر (صرفا شامل آدرس تصویر) استفاده کرد.
background:#099 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');
- در کد بالا تصویری با ابعاد کوچک آنقدر در راستای محور X ها تکرار می شود تا سطر اول صفحه را به طور کامل پوشش دهد.
- رنگ پس زمینه صفحه را با ویژگی background-color و یک مقدار کد هگز به صورت C69 و درج علامت # در ابتدا تنظیم کرده ایم، هگز یک استاندارد رنگی است که در آن هر کد نشانگر یک رنگ بخصوص است، معمولا برای تعیین رنگ در CSS از کدهای هگز با مقادیر عدد و حروف یا استاندارد RGB با مقادیر عددی استفاده می کنند، این کدها و عددها را می توانیم از طریق بخش مربوط به رنگ ها در برنامه های کدنویسی، برنامه های گرافیکی یا ابزارهای تحت وب پیدا کنیم.
- background-position موقعیت تصویر پس زمینه ما را در صفحه یا در عنصر هدف (به فرض تگ div) مشخص می کند.
- background-repeat مشخص می کند که نحوه تکرار تصویر پس زمینه در صفحه یا در عنصر هدف به چه شکل باشد.
در ادامه به بررسی جزئی تر هر یک از ویژگی های فوق می پردازیم.

ویژگی background


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

ویژگی background-color


در این ویژگی مشابه background رنگ مد نظر را به صورت کد HEX یا RGB درج می کنیم و به این صورت رنگ پس زمینه بر روی تگ HTML هدف اعمال می شود، به فرض ممکن است برای یک بلاک div از آن استفاده کنیم و لذا این ویژگی رنگ پس زمینه آن بلاک را شکل دهد.
.my-div{
    background-color:#093;
}
یا
.my-div{
    background-color:rgb(150, 100, 200);
}
برای نادیده گرفتن ویژگی های background و background-color می توانیم مقدار آنها را عبارت none قرار دهیم.

ویژگی background-image


در این ویژگی مشابه background آدرس تصویر را به صورت نسبی یا مطلق در قسمت url درج می کنیم و به این صورت تصویر پس زمینه بر روی تگ HTML هدف اعمال می شود، به فرض ممکن است برای یک بلاک div از آن استفاده کنیم و لذا این ویژگی تصویر پس زمینه آن بلاک را شکل دهد.
.my-div{
    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 باشد در صفحاتی که ارتفاع آنها از ارتفاع صفحه نمایش کاربر بیشتر است نوار اسکرول کناری (عمودی) نمایش داده می شود و اگر کاربر به پائین یا بالای صفحه اسکرول کند تصویر پس زمینه در جای خود بدون تغییر و ثابت باقی می ماند، این تکنیکی است که در طراحی برخی از قالب های وب مشاهده می شود.
body{
    background-attachment:fixed;
}
مقادیر دیگر این ویژگی را می توانیم scroll قرار دهیم که حالت پیش فرض است.

ویژگی background-position


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

ویژگی background-repeat


ویژگی background-repeat برای مشخص کردن نحوه تکرار تصویر پس زمینه (در مواقعی که تصویر کوچکتر از فضایی است که می خواهیم آن را پوشش دهد) به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود یا برعکس بخواهیم که تمام پس زمینه را پوشش دهد، بدین منظور از این ویژگی و مقادیر آن استفاده می کنیم.
.my-div{
    background-repeat:repeat-y;
}
مقادیر background-repeat به صورت repeat ،no-repeat، repeat-x و repeat-y تعریف می شود.

ویژگی background-size


ویژگی background-size قابلیت دیگری از خانواده ویژگی های مربوط به خاصیت Background است که می توانیم با استفاده از آن تنظیمات بیشتری بر روی اندازه تصویر پس زمینه و نحوه نمایش آن داشته باشیم، به فرض با در نظر گرفتن مقدار cover برای این ویژگی، پس زمینه کل صفحه را پوشش می دهد.
.my-div{
    background-size:cover;
}
مقادیر این ویژگی می تواند به یکی از حالت های زیر تنظیم شود:
- مقدار contain، پوشش کامل صفحه یا بلاک با تصویر پس زمینه، در صورتی که ابعاد تصویر از فضای مورد نیاز کوچکتر باشد به تعداد لازم در جهت عمودی یا افقی تکرار خواهد شد (مگر اینکه در کنار ویژگی background-size ویژگی background-repeat را با مقادیر no-repeat تنظیم کنیم).
- مقدار cover، پوشش کامل صفحه یا بلاک با تصویر پس زمینه، در صورتی که ابعاد تصویر از فضای مورد نیاز کوچکتر باشد، به اندازه مورد نیاز در جهت عمودی یا افقی کشیده خواهد شد.
- مقدار دهی درصدی یا پیکسلی، در این صورت تصویر پس زمینه بر همان مبنا تغییر اندازه داده، در صورتی که ابعاد تصویر از فضای مورد نیاز کوچکتر باشد، به اندازه مورد نیاز در جهت عمودی یا افقی تکرار خواهد شد.
.my-div{
    background-size:50%;
}

.my-div{
    background-size:100px 50px;
}
نکته: علاوه بر مقادیر گفته شده می توانیم بر حسب نیاز از مقدار auto، inherit، initial و unset نیز برای این ویژگی استفاده کنیم.

ویژگی background-origin


ویژگی background-origin نقطه شروع نمایش و موقعیت تصویر پس زمینه ای که با ویژگی background یا background-image تنظیم شده را تعیین می کند و می تواند مقادیر border-box، padding-box و content-box داشته باشد (همچنین مقدار عمومی initial، inherit و unset) که هر کدام از این مقادیر در نحوه رفتار این ویژگی تاثیرگذار هستند، عبارت box در این مقادیر اشاره به مفهوم CSS Box Model دارد که به طور خلاصه یعنی هر عنصر HTML را می توان شبیه یک جعبه در نظر گرفت که می تواند چهار سطح داشته باشد:
1-margin
2-border
3-padding
4-content
در این الگو خاصیت margin در خارجی ترین سطح و محتوا (content) در داخلی ترین سطح در نظر گرفته می شود (در خصوص خاصیت margin، border و padding در آموزش های بعدی به صورت اختصاصی صحبت خواهیم کرد، در این مرحله از آموزش صرف آشنایی مختصر با این اصطلاحات کفایت می کند)، بر همین اساس مقادیر با پسوند box بر روی عناصر وب اعمال خواهد شد (با نوشتن استایل های فرضی و آزمایش و خطا می توان عملا این تفاوت ها را درک کرد).
.my-div{
    background-origin:border-box;
}
نکته 1: همان طور که گفتیم این ویژگی تنها در حالتی موثر است که برای پس زمینه تصویری در نظر گرفته شده باشد (برای حالت صرفا رنگ بی تاثیر است!).
نکته 2: اگر ویژگی background-attachment برابر مقدار fixed باشد ویژگی background-origin بی تاثیر خواهد شد.

ویژگی background-clip


ویژگی background-clip محدوده نمایش رنگ یا تصویر پس زمینه را مشخص می کند، این ویژگی می تواند مقادیر border-box، padding-box و content-box داشته باشد (همچنین مقدار عمومی initial، inherit و unset) که هر کدام از این مقادیر در نحوه رفتار این ویژگی بر اساس مفهوم CSS Box Model تاثیرگذار هستند.
.my-div{
    background-clip:border-box;
}
این بخش را با نمونه کدی پیشرفته از صفحه وبی فرضی که در آن ویژگی های مختلف خاصیت 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:#666;
    color:#FFF;
}
.my-div-1, .my-div-2, .my-div-3{
    height:50px;
    width:50%;
    margin:12px auto auto auto;
    border:12px solid rgba(23, 23, 23, 0.5);
}
.my-div-1{
    background:#C28DD3 url('background.png');
    background-size:contain;
}
.my-div-2{
    background:#9187E4 url('background.png');
    background-position:center left;
}
.my-div-3{
    background:#AD393B url('background.png');
    background-size:30%;
    background-clip:padding-box;
}
.rtl{
    direction:rtl;
}
</style>
</head>
<body>
<div class="my-div-1">
my-div-1
</div>
<div class="my-div-2">
my-div-2
</div>
<div class="my-div-3">
my-div-3
</div>
<hr>
<div class="rtl">
در بلاک های بالا از ویژگی های مختلف خاصیت Background استفاده شده که در هنگام طراحی رابط کاربری صفحات وب بر حسب موقعیت مورد نیازمان خواهند بود، برای درک بهتر نحوه رفتار متفاوت این ویژگی ها کافی است صفحه وبی فرضی داشته باشیم و ویژگی ها را با مقادیر مختلف به صورت آزمایش و خطا در آن امتحان کنیم.
</div>
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» ویژگی های Font و Text در CSS
» نحوه تنظیم لیست با تگ ul li در CSS
» کاربرد خاصیت display در CSS
» سلکتور آی دی (ID) و کلاس (Class) در CSS
» مقدمه ای بر CSS و استایل دهی صفحات وب
commentنظرات (۲۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: 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 × 4
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آگهی
طراحی سایت
Oxweb.ir

ارائه خدمات طراحی سایت | طراحی وب سایت در تهران