آموزش برنامه نویسی و مهارتهای وب
شنبه ۱۲ فروردین ۱۴۰۲
Saturday, April 1, 2023 GMT +3:30
Saturday, April 1, 2023 GMT +3:30
خاصیت Background و ویژگی های آن در CSS
بعد از آشنایی اولیه با 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');*/- در قسمت مربوط به پارامتر url باید آدرس تصویر را قرار دهیم، این آدرس با توجه به محل قرارگیری فایل می تواند به صورت نسبی یا مطلق باشد.
مثال برای حالت نسبی:
background-image:url('background.gif');background-image:url('https://webgoo.ir/example/css/background.gif');- رنگ پس زمینه صفحه را با ویژگی 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');
}ویژگی background-color
در این ویژگی مشابه background رنگ مد نظر را به صورت کد HEX یا RGB درج می کنیم و به این صورت رنگ پس زمینه بر روی تگ HTML هدف اعمال می شود، به فرض ممکن است برای یک بلاک div از آن استفاده کنیم و لذا این ویژگی رنگ پس زمینه آن بلاک را شکل دهد.
.my-div{
background-color:#093;
}.my-div{
background-color:rgb(150, 100, 200);
}ویژگی background-image
در این ویژگی مشابه background آدرس تصویر را به صورت نسبی یا مطلق در قسمت url درج می کنیم و به این صورت تصویر پس زمینه بر روی تگ HTML هدف اعمال می شود، به فرض ممکن است برای یک بلاک div از آن استفاده کنیم و لذا این ویژگی تصویر پس زمینه آن بلاک را شکل دهد.
.my-div{
background-image:url('upload/images/bg-image.jpg');
}نکته: در حالت نسبی با توجه به محل قرارگیری فایل تصویر و صفحه وبی که ویژگی background-image در آن به کار می رود آدرس دهی مشخص می شود، به فرض اگر صفحه وب و فایل تصویر هر دو در یک دایرکتوری باشند کافی است در قسمت url نام فایل تصویر با پسوند را درج کنیم (به فرض bg-image.jpg) یا اگر صفحه وب در دایرکتوری اصلی سایت و فایل تصویر در دایرکتوری upload/images باشد، آدرس نسبی تصویر upload/images/bg-image.jpg خواهد بود، در حالت مطلق آدرس کامل تصویر در وب را درج می کنیم یعنی همان آدرسی که اگر در مرورگر درج کنیم فایل تصویر دانلود خواهد شد، حالت مطلق بیشتر برای مواقعی است که فایل تصویر از یک سایت دیگر در صفحه وبمان بارگذاری می شود یا اینکه بخواهیم به هر دلیل فایل ها به صورت مطلق آدرسی دهی شوند (به فرض برای رعایت کپی رایت یا در موارد ضرورت های برنامه نویسی و...)، در مثال بالا آدرس تصویر به صورت دایرکتوری (نسبی) درج شده است.
ویژگی background-attachment
ویژگی background-attachment برای این منظور است که رفتار مرورگر در خصوص ثبات یا عدم ثبات پس زمینه به هنگام اسکرول صفحه را تعیین کنیم، اگر مقادیر این ویژگی fixed باشد در صفحاتی که ارتفاع آنها از ارتفاع صفحه نمایش کاربر بیشتر است نوار اسکرول کناری (عمودی) نمایش داده می شود و اگر کاربر به پائین یا بالای صفحه اسکرول کند تصویر پس زمینه در جای خود بدون تغییر و ثابت باقی می ماند، این تکنیکی است که در طراحی برخی از قالب های وب مشاهده می شود.
body{
background-attachment:fixed;
}ویژگی background-position
ویژگی background-position موقعیت تصویر پس زمینه را در محلی که استفاده شده مشخص می کند، به فرض اگر بخواهیم تصویر خود را متمایل به سمت راست قرار دهیم باید از background-position با مقدار right استفاده کنیم.
.my-div{
background-position:right;
}
.my-div-2{
background-position:bottom left;
}ویژگی background-repeat
ویژگی background-repeat برای مشخص کردن نحوه تکرار تصویر پس زمینه (در مواقعی که تصویر کوچکتر از فضایی است که می خواهیم آن را پوشش دهد) به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود یا برعکس بخواهیم که تمام پس زمینه را پوشش دهد، بدین منظور از این ویژگی و مقادیر آن استفاده می کنیم.
.my-div{
background-repeat: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;
}ویژگی 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 .my-div{
background-origin:border-box;
}نکته 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;
}<!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>دسته بندی: آموزش مقدماتی » CSS
مطالب بیشتر:مقدمه ای بر CSS و استایل دهی صفحات وب
نحوه تنظیم استایل لینک (Link) در CSS
ویژگی های Font و Text در CSS
سلکتور آی دی (ID) و کلاس (Class) در CSS
کاربرد خاصیت height و width در CSS
دیدگاه
۳۰ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.داوود
۱۲:۵۹ ۱۳۹۴/۰۳/۱۷
سلام آقای مهندس؛
ممنون بابت توضیحتون؛ فقط استاد در توضیحی که فرمودین"تگ img به صورت پیش فرض در حالت inline-block پردازش می شود، مقدار block باعث می شود دو طرف عنصر پاک سازی شود (شبیه مقدار both برای خاصیت clear در CSS)، البته شاید در اینجا تاثیری نداشته باشد و صرفا سلیقه ای یا از باب عادت درج شده! اما اگر محتوا در کنار تصویر وجود داشته باشد، مقدار block باعث clear شدن دو طرف تصویر می شود."
فرمایش شما کاملا متین و درسته، حالا اگه بیایم و float بذاریم چون عنصر مورد نظر شناور شده این حالت دیگه از بین میره و اثر display بی تاثیر میشه. درست میگم؟
ممنون بابت توضیحتون؛ فقط استاد در توضیحی که فرمودین"تگ 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 هم به مقصودمون نمیرسیم. درست گفتم خدمتتون. متشکرم
ببخشید اگه بخوایم یه 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.background-repeat:repeat;غریب
۱۹:۱۲ ۱۳۹۵/۰۲/۰۵
ممنون استاد از راهنماییتون حق با شماست عزیز واقعا ممنون از همین روشی که گفتید استفاده میکنم
majid
۱۹:۰۸ ۱۳۹۵/۰۴/۰۲
سلام من هرکاری می کنم نمیتونم تصویر این کد رو
http://s7.picofile.com/file/8256952550/Found_2704200_1321314.jpgحذف شد!کدهای شما ناقص است، عبارت url در استایل CSS استفاده نشده!
محمد
۱۳:۴۸ ۱۳۹۵/۰۶/۲۸
سلام.
یک مشکلی که در طراحی صفحات وب با html و css دارم اینه که بکگراند همیشه اندازه ی اولیه خودشه.
آیا راهی هست که بدون استفاده از بوت استرپ و....
به تنهایی با خود html یا 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;
}۱۷:۴۳ ۱۳۹۶/۱۱/۱۶
بسیار جامع و عالی
امیر
۰۲:۰۹ ۱۳۹۷/۰۸/۰۵
سلام ببخشید من میخوام برای بکگراند سایتم از این پارتیکل بک گراندا بزارم ... از همینا که تو سایت کد پن (codepen.io) هستش... اگر برید تو این سایت و سرچ کنید پارتیکل میفهمید منظورم چیه... یه سری بک گرانده که عکس نیست با کمک فایل های اچ تی ام ال و سی اس اس و جاوا ساخته میشه و نسبت به موس و حرکات یا کلیک هایی که رو صفحه انجام میدی واکنش های خیلی جالبی انجام میده...
ولی نمیدونم چطوری باید قرارشون بدم چون بصورت عکس نیستن چن تا فایلن...
میشه کمکم کنید خیلی نیاز دارم...
ولی نمیدونم چطوری باید قرارشون بدم چون بصورت عکس نیستن چن تا فایلن...
میشه کمکم کنید خیلی نیاز دارم...
در آدرس زیر کتابخانه نسبتا سبکی برای ایجاد این قابلیت وجود دارد:
https://vincentgarreau.com/particles.jsامیر
۲۲:۰۷ ۱۳۹۷/۱۰/۰۳
سلام
خداقوت
من تو این موضوع واقعا ساده گیر کردم که نحوه نوشتاری کد background برای تمام صفحه ی سایت به چه شکل است من در قسمت <body> هرکاری میکنم نمیشه و عکس رو بزرگ در صفحه نشون میده.
لطفا شیوه صحیح نوشتاریش رو بگید!
با تشکر از شما
خداقوت
من تو این موضوع واقعا ساده گیر کردم که نحوه نوشتاری کد background برای تمام صفحه ی سایت به چه شکل است من در قسمت <body> هرکاری میکنم نمیشه و عکس رو بزرگ در صفحه نشون میده.
لطفا شیوه صحیح نوشتاریش رو بگید!
با تشکر از شما
لطفا آموزش را به صورت کامل مطالعه کنید، تقریبا هرآنچه در خصوص background نیاز بوده گفته شده، در صورتی که همچنان با مشکل مواجه بودید لطفا آدرس صفحه (وبلاگ، سایت) مورد نظر را درج کنید تا بررسی بیشتر صورت گیرد.
محمدرضارضایی
۲۱:۱۳ ۱۳۹۸/۰۴/۱۷
سلام
ببخشید اگه یه عکس کوچک 50 پیکسل رو بخواهییم به صورت متوالی تکرار کنیم در کل سایت باید چه کار کنیم
ببخشید اگه یه عکس کوچک 50 پیکسل رو بخواهییم به صورت متوالی تکرار کنیم در کل سایت باید چه کار کنیم
می توانید از خاصیت background-repeat با مقدار repeat برای تگ body استفاده کنید.
bahar
۲۲:۵۰ ۱۴۰۱/۱۲/۰۱
سلام و عرض ادب
از بابت مطلب مفیدی که در سایت قرار دادید سپاسگزارم
از بابت مطلب مفیدی که در سایت قرار دادید سپاسگزارم
صفحه 2 از 2آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.Reza
سلام استاد خسته نباشید من یه سوالی داشتم میخوام بدونم چطور باید در وبلاگ لوگو یا فایل png روی عکس گذاشت برای مثال یکی از...۱۴۰۲/۰۱/۰۷
سامان
سلام امکان داره شما یک مثال بهتر بزنید نسبت به بنده که بجای بک گراند کل صفحه تغییر رنگ بده بصورت خودکار۱۴۰۱/۱۲/۲۱
سامان
سلام من کلی در سطح وب گشتم اما نتونستم چیزی پیدا کنم درباره اینکه چطور ظاهر سایت در روز سفید بشه و در...۱۴۰۱/۱۲/۲۰
امیر
سلام و عرض ادب من از قالب نگارشاپ استفاده میکنم یک مشکل دارم ، سایت در صفحه موبایل همه ساختارش درسته فقط مشکل اینه...۱۴۰۱/۱۲/۱۷
ابوالفضل
سلام استاد در یک پروژه نیازه که هفتمین مقدار یک رشته عددی رو خروجی بگیرم از تابع زیر استفاده میکنم اما خطا می گیرم: ...۱۴۰۱/۱۲/۱۴
روزبه پارسی
ببخشید یه سوال دیگه هم دارم البته شرمنده این صفحه رو نگاه کنید: یه جا برای شماره نوشته (نمایش کامل) که باید کلیک...۱۴۰۱/۱۲/۱۳
روزبه پارسی
با تشکر از شما استاد عزیز خیلی خوب بود توی صفحه اگه چند تا پاراگراف داشته باشیم که بخواهیم این تغییر رنگ رو برای...۱۴۰۱/۱۲/۱۳
مهدی
من یک سایت سر و کار دارم در هر 24 ساعت فقط یک بار برای 5 دقیقه باز میشود اما وقتیکه تمام مراحل را تمام...۱۴۰۱/۱۲/۱۲
پــرتو
سلام خسته نباشید در مورد ابزار inspector یکم بیشتر توضیح می دین که چطوریه مثلا اگر بخوایم جای منوها رو از طریق این ابزار پیدا...۱۴۰۱/۱۲/۱۲
روزبه پارسی
با سلام و خسته نباشید ببخشید من یه متن دارم که می خوام هر وقت صفحه رو لود می کنم متن رنگش بصورت راندوم...۱۴۰۱/۱۲/۱۲
bahar
سلام و عرض ادب از بابت مطلب مفیدی که در سایت قرار دادید سپاسگزارم۱۴۰۱/۱۲/۰۱
محمود
سلام لطفن کاری کنید که وقتی منو در پایین صفحه قرار می گیرد منوی آبشاری به طرف بالا باز شود . با تشکر...۱۴۰۱/۱۱/۱۷
ali
سلام آیا راهی یا کدی وجود داره که بتونیم فایل های آپلود شده غیر مستقیم رو توی وبلاگ پخش کنیم؟۱۴۰۱/۱۱/۱۷
پــرتو
سلام جناب خسته نباشید ببخشید توی بلاگفا کلا نمیشه چیزی ثبت کرد یا فقط برای من اینجوریه؟۱۴۰۱/۱۱/۱۶
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.