آگهی
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 مطالب بیشتر:
» نحوه تنظیم استایل لینک (Link) در CSS
» کاربرد خاصیت height و width در CSS
» کاربرد خاصیت display در CSS
» کاربرد ویژگی position و float در CSS
» نحوه تنظیم لیست با تگ ul li در CSS
commentنظرات (۲۹ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: داوود
زمان: ۱۲:۵۹:۳۴ - تاریخ: ۱۳۹۴/۰۳/۱۷
سلام آقای مهندس؛
ممنون بابت توضیحتون؛ فقط استاد در توضیحی که فرمودین"تگ img به صورت پیش فرض در حالت inline-block پردازش می شود، مقدار block باعث می شود دو طرف عنصر پاک سازی شود (شبیه مقدار both برای خاصیت clear در CSS)، البته شاید در اینجا تاثیری نداشته باشد و صرفا سلیقه ای یا از باب عادت درج شده! اما اگر محتوا در کنار تصویر وجود داشته باشد، مقدار block باعث clear شدن دو طرف تصویر می شود."
فرمایش شما کاملا متین و درسته، حالا اگه بیایم و float بذاریم چون عنصر مورد نظر شناور شده این حالت دیگه از بین میره و اثر display بی تاثیر میشه. درست میگم؟
پاسخ: 
بله، خاصیت float باعث block (و شناور) شدن عنصر مورد نظر شده و مقدار تنظیم شده در display نادیده گرفته می شود، البته با تنظیم مقدار width چند بلاک و استفاده از float مشترک (left یا right) برای آنها می توان بلاک ها را در کنار هم به صورت inline نمایش داد! در واقع عنصر float شده نوعی block شناور در دو جهت چپ یا راست است.
نویسنده: maliheh
زمان: ۱۱:۴۵:۱۹ - تاریخ: ۱۳۹۴/۰۴/۰۶
مرسی کارم راه افتاد
دستتون درد نکنه
نویسنده: مهدی
زمان: ۱۷:۵۱:۰۷ - تاریخ: ۱۳۹۴/۰۵/۳۰
سلام و خسته نباشید
چکار کنیم که وقتی یک عکس رو به عنوان پس زمینه تو کدمون میزاریم تو صفحه تبدیل نشه به چندین عکس و خودش کامل بیفته داخل صفحه
پاسخ: 
باید در قسمت background-repeat از no-repeat استفاده کنید.
نویسنده: محمد
زمان: ۱۲:۵۲:۲۳ - تاریخ: ۱۳۹۴/۰۶/۱۱
سلام
ببخشید من یه مشکل دارم در نمایش بکگراند،
وقتی صفحه باز میشه اول یه لحظه یعنی چند صدم ثانیه عکسی که گذاشتم دیده میشه و بعد سریع میره، باید چیکار کنم؟؟
پاسخ: 
آدرس سایت یا وبلاگتان را جهت بررسی درج کنید!
نویسنده: فرهاد ف
زمان: ۲۰:۰۲:۱۳ - تاریخ: ۱۳۹۴/۰۸/۲۳
سلام استاد.
ببخشید اگه بخوایم یه div با دادن Margin: 0 auto بیاد و وسط قرار بگیره، فکر کنم حتما حتما باید خاصیت display رو block بدیم و حتی با inline-block هم به مقصودمون نمیرسیم. درست گفتم خدمتتون. متشکرم
پاسخ: 
بله، همین طور است، تا آنجا که می دانیم تاثیر margin در این حالت بر روی بلاک با خاصیت block نسبت به inline-block متفاوت است!
نویسنده: محسن
زمان: ۲۰:۱۰:۰۸ - تاریخ: ۱۳۹۴/۱۲/۱۴
سلام استاد
من برای تصویر صفحه یا بدنه وب از لینک آپلود سنتر استفاده کردم میخواستم بدونم راه حلی مطمئن تر از این وجود داره؟! چون ممکنه لینک مربوط به آپلود سنتر ممکنه حذف یا فیلتر بشه
پاسخ: 
قاعدتا مطمئن ترین راه استفاده از یک هاست و دامنه شخصی است؛ اما اگر ناچار به آپلود فایل های خود در اینگونه سرویس ها هستید، مواردی را انتخاب کنید که حداقل از اعتبار و کیفیت بهتری برخوردار باشند!
نویسنده: غریب
زمان: ۰۹:۱۲:۴۴ - تاریخ: ۱۳۹۵/۰۲/۰۴
سلام عزیز
در بخش تکرار بک راند دستوری که وجود داشت کمی طولانی بنظر میرسه
بنده برای تکرار این روش و انتخاب کردم
background-repeat:repeat-x:repeat-y;
نمونه
<style>body{background-color:#000;background-image:url(http://www.gap8.ir/gharib/0.jpg);background-repeat:repeat-x:repeat-y;}</style>
ایا اشکالی در این نوع تعریف مقادیر میبینید ظاهرا بدون مشکل کار میکنه
و یک سوال معمولا همیشه رنگ بک راند انتخاب میشه حتی اگه تصویر برای بک راند انتخاب شده باشه در همین نمونه هم میبینید ایا این انتخاب رنگ لازمه چون تصویر کامل پوشش میده ضمینه رو اکثرا دیدم که رنگ هم تعریف میشه همراه تصویر
ممنون و مرسی از سایت واقعا مفیدتون
پاسخ: 
روش شما صحیح نیست و خطای Syntax دارد!
Warning: Expected end of value but found ':'.  Error in parsing value for 'background-repeat'.  Declaration dropped.
ضمن اینکه تکرار در محور x ها و y ها در واقع با دستور زیر (پیش فرض مرورگرها) تحقق می یابد که خیلی کوتاه تر است:
background-repeat:repeat;
دلیل اینکه به ظاهر کد شما عمل می کند در واقع استفاده مرورگر از حالت پیش فرض (repeat) است، در مورد سوال دوم، دلیل این کار به جهت نمایش رنگ به جای تصویر در حالتی است که به هر دلیل تصویر بارگذاری نشود، به طور مثال کاربر ممکن است نمایش تصاویر را در مرورگر خود غیرفعال کند.
نویسنده: غریب
زمان: ۱۹:۱۲:۲۲ - تاریخ: ۱۳۹۵/۰۲/۰۵
ممنون استاد از راهنماییتون حق با شماست عزیز واقعا ممنون از همین روشی که گفتید استفاده میکنم
نویسنده: majid
زمان: ۱۹:۰۸:۳۶ - تاریخ: ۱۳۹۵/۰۴/۰۲
سلام من هرکاری می کنم نمیتونم تصویر این کد رو
http://s7.picofile.com/file/8256952550/Found_2704200_1321314.jpg
داخل بلاکهای این قالب قرار بدم
حذف شد!
البته منظورم استفاده از خاصیتهای بکگراند بود که هرچی این کدها رو داخل این کلاسها قرار میدم چیزی نمیبینم
پاسخ: 
کدهای شما ناقص است، عبارت url در استایل CSS استفاده نشده!
نویسنده: محمد
زمان: ۱۳:۴۸:۳۵ - تاریخ: ۱۳۹۵/۰۶/۲۸
سلام.
یک مشکلی که در طراحی صفحات وب با html و css دارم اینه که بکگراند همیشه اندازه ی اولیه خودشه.
آیا راهی هست که بدون استفاده از بوت استرپ و....
به تنهایی با خود html یا css اندازه پیش فرض بکگراند رو تغییر داد؟
پاسخ: 
با استفاده از خاصیت background-size و مقدار cover این مشکل قابل حل است، مثال:
body { 
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
این قابلیت در CSS3 وجود دارد و لذا در مرورگرهای قدیمی پشتیبانی نمی شود!
نویسنده: علی طاهری
زمان: ۱۷:۴۳:۴۷ - تاریخ: ۱۳۹۶/۱۱/۱۶
بسیار جامع و عالی
نویسنده: امیر
زمان: ۰۲:۰۹:۰۰ - تاریخ: ۱۳۹۷/۰۸/۰۵
سلام ببخشید من میخوام برای بکگراند سایتم از این پارتیکل بک گراندا بزارم ... از همینا که تو سایت کد پن (codepen.io) هستش... اگر برید تو این سایت و سرچ کنید پارتیکل میفهمید منظورم چیه... یه سری بک گرانده که عکس نیست با کمک فایل های اچ تی ام ال و سی اس اس و جاوا ساخته میشه و نسبت به موس و حرکات یا کلیک هایی که رو صفحه انجام میدی واکنش های خیلی جالبی انجام میده...
ولی نمیدونم چطوری باید قرارشون بدم چون بصورت عکس نیستن چن تا فایلن...
میشه کمکم کنید خیلی نیاز دارم...
پاسخ: 
در آدرس زیر کتابخانه نسبتا سبکی برای ایجاد این قابلیت وجود دارد:
https://vincentgarreau.com/particles.js
در قسمت CodePen می توانید سورس کدها و تنظیمات را دریافت کنید.
نویسنده: امیر
زمان: ۲۲:۰۷:۰۹ - تاریخ: ۱۳۹۷/۱۰/۰۳
سلام
خداقوت
من تو این موضوع واقعا ساده گیر کردم که نحوه نوشتاری کد background برای تمام صفحه ی سایت به چه شکل است من در قسمت <body> هرکاری میکنم نمیشه و عکس رو بزرگ در صفحه نشون میده.
لطفا شیوه صحیح نوشتاریش رو بگید!
با تشکر از شما
پاسخ: 
لطفا آموزش را به صورت کامل مطالعه کنید، تقریبا هرآنچه در خصوص background نیاز بوده گفته شده، در صورتی که همچنان با مشکل مواجه بودید لطفا آدرس صفحه (وبلاگ، سایت) مورد نظر را درج کنید تا بررسی بیشتر صورت گیرد.
نویسنده: محمدرضارضایی
زمان: ۲۱:۱۳:۳۶ - تاریخ: ۱۳۹۸/۰۴/۱۷
سلام
ببخشید اگه یه عکس کوچک 50 پیکسل رو بخواهییم به صورت متوالی تکرار کنیم در کل سایت باید چه کار کنیم
پاسخ: 
می توانید از خاصیت background-repeat با مقدار repeat برای تگ body استفاده کنید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




6 × 6
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form پیمان نقی پور
در:
سلام میخواستم بدونم فیلتر نویسی بورس هم با همین زبان جاوا انجام میشه؟ چطور میشه شرطی تعیین کرد تا نتیجه فیلتر در هنگام...
۱۸:۲۱:۳۲ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، css رو تسلط کامل دارم تا حدودیش هم به لطف شما و جاوا اسکریپت هم چند روزی میشه شروع کردم به آموزش...
۱۵:۴۸:۳۳ ۱۳۹۸/۱۲/۰۵

form amin
در:
با سلام آدرس مطالب سایت وبگو بعد از ای دی پست عنوان فارسی هست ولی زمانی که به سورس کد پست نگاه میکنیم قسمت فارسی...
۱۴:۵۹:۴۴ ۱۳۹۸/۱۲/۰۵

form mahdi
در:
سلام استاد ، لینک آموزش مقدماتی جاوا اسکریپت توی منوی بالایی خرابه ، به وظیفه شهروندیم عمل کردم :)
۱۵:۰۹:۰۰ ۱۳۹۸/۱۲/۰۴

form aseman
در:
با سلام . میخوام هر وقت توی تکس باکسم عدد 1 وارد شد در خروجی تگ p معادل حروفی یک رو بهم بده. مثلا:...
۱۴:۴۵:۲۹ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد ، گذاشتمش توی این وبلاگ رمزش هم ******* هستش ، واقعیت فهمیدم که میشه درستش کرد ولی چجوریشو نفهمیدم :) خیلی ممنون...
۱۳:۲۰:۱۴ ۱۳۹۸/۱۲/۰۴

form mahdi
در:
سلام استاد، وبلاگ ندارم، اینا رو برای یادگیری و یه هدف دیگه دارم سوال میکنم، مطالب مرتبط رو پیدا کردم راهشو، فقط قسمت ارسال نظر...
۲۰:۱۵:۰۲ ۱۳۹۸/۱۲/۰۳

form نیما
در:
سلام. من میخوام با استفاده از یک input مقدار عددی رو از کاربر دریافت کنم و بعد از ضرب در عددی خاص که خودم تعیین...
۱۸:۰۷:۰۴ ۱۳۹۸/۱۲/۰۳

form وحید
در:
سلام وقت بخیر حدود شش ماه هست با فیلتر شکن کار میکنم به اسم Lightvpn. یک روز هست این خطا رو میده و...
۱۸:۰۰:۰۶ ۱۳۹۸/۱۲/۰۳

form mahdi
در:
سلام ، استاد شرمنده یه سوال دیگه هم داشتم مثل قبلی ، مطالب مرتبط که انتهای هر پست میاد رو چطوری با جاوا اسکریپت توی...
۲۳:۴۶:۲۳ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد عزیز ، توی لوکس بلاگ میشه چیزی مثل پست های شاخص که توی وردپرس هست با جاوا اسکریپت درست کنیم که مثلا داخل...
۲۳:۱۴:۴۰ ۱۳۹۸/۱۲/۰۲

form mahdi
در:
سلام استاد ، بخش نظرات قالب لوکس بلاگ یعنی طرح کل صفحش رو چطوری دسترسی داشته باشیم که خودمون بتونیم طراحیش کنیم ؟ منظورم اینه...
۱۸:۱۱:۳۳ ۱۳۹۸/۱۲/۰۱

form علیرضا سهیلی
در:
سلام من وقتی میخوام شارژ بزنم این کد واسم میاد معنیش یعنی چی
۱۴:۳۳:۱۴ ۱۳۹۸/۱۲/۰۱

form mahdi
در:
سلام استاد ، فهمیدم چطوریه نیازی به پاسخ نیست، چقدرم ساده بود :) مرسی
۰۹:۴۸:۴۹ ۱۳۹۸/۱۱/۳۰

form mahdi
در:
سلام استاد عزیز ، یه سوال داشتم ، توی لوکس بلاگ میخوام یه قالب طراحی کنم بعد نمیدونم چطوری بین پست ها فاصله ایجاد کنم...
۰۱:۳۵:۳۳ ۱۳۹۸/۱۱/۳۰
آگهی