اموزش قرار دادن تصویر پس زمینه

اموزش  قرار دادن تصویر پس زمینه یکی از اموزشهای کامل برای تمام تغییرات روی پس زمینه میباشد که میتوان از تکرار عمودی,افقی,تمام صفحه کردن,ثابت کردن و..نام برد. برای تغییرات روی عکس پس زمینه سایت میتوانید از css استفاده کنید.شما میتوانید تصاویر پس زمینه را به صورت عمودی,افقی به صورت تکرارشونده و یا ثابت قرار دهید.در ادامه اموزش کامل را برای شما قرار دادیم تا بتوانید با بکگرند سایت خود بازی کنید و به دلخواه خود تغییر هید.

 

 اموزش  قرار دادن تصویر پس زمینه یکی از اموزشهای کامل برای تمام تغییرات روی پس زمینه میباشد که میتوان از تکرار عمودی,افقی,تمام صفحه کردن,ثابت کردن و..نام برد. برای تغییرات روی عکس پس زمینه سایت میتوانید از css استفاده کنید.شما میتوانید تصاویر پس زمینه را به صورت عمودی,افقی به صورت تکرارشونده و یا ثابت قرار دهید.در ادامه اموزش کامل را برای شما قرار دادیم تا بتوانید با بکگرند سایت خود بازی کنید و به دلخواه خود تغییر هید.  اموزش قرار دادن تصویر پس زمینه   ابتدا کد قرار دادن بکگرندو براتون قرار میدم    <style>  body { background-image: url(https://codebazan.ir/test1.jpg);  } </style>   1 2 3 4 5 6 7 8 9 10 11     <style>   body { background-image: url(https://codebazan.ir/test1.jpg);   } </style>     با قرار دادن کد فوق در استایل سایت خودو یا هد قالب وبلاگ تصویر پس زمینه سایت شما به صورت موزائیک تکرار خواهد شد.  دمو کد بالا  خب حالا برای اینکه عکس بکگرند ما فقط به صورت عمودی تکرار بشه به استایل کد زیر را اضافه میکنیم  background-repeat:repeat-y;  با اضافه کردن کد بالا به استایل, بکگرند ما به صورت عمودی تکرار خواهد شد    <style>  body { background-image: url(https://codebazan.ir/test1.jpg); background-repeat:repeat-y; } </style>   1 2 3 4 5 6 7 8 9 10 11     <style>   body { background-image: url(https://codebazan.ir/test1.jpg); background-repeat:repeat-y; } </style>     دمو کد تکرار عمودی بکگرند  حالا برای تغییر و تکرار بکگرند به صورت  افقی در کد بالا مقدار y رو به x تغییر دهید.  background-repeat:repeat-x;    <style>  body { background-image: url(https://codebazan.ir/test1.jpg); background-repeat:repeat-x; } </style>   1 2 3 4 5 6 7 8 9 10 11     <style>   body { background-image: url(https://codebazan.ir/test1.jpg); background-repeat:repeat-x; } </style>     دمو کد تکرار افقی عکس بکگرند  برای اینکه عکس بکگرندمون تکرار نشه از کد زیر استفاده میکنیم   background-repeat: no-repeat;    <style>  body { background-image: url(https://codebazan.ir/test1.jpg); background-repeat: no-repeat;  } </style>   1 2 3 4 5 6 7 8 9 10 11     <style>   body { background-image: url(https://codebazan.ir/test1.jpg); background-repeat: no-repeat;  } </style>     دمو کد تکرار نشدن عکس بکگرند  حالا میخوایم تا با حرکت اسکرول عکسمون ثابت باشه و از جاش تکون نخوره کد زیر را به استایلمون اضافه میکنیم  background-attachment: fixed;  این میشه    <style type="text/css">  body { background-image:url(https://codebazan.ir/test1.jpg); background-repeat: no-repeat; background-attachment: fixed;   }  </style>   1 2 3 4 5 6 7 8 9 10 11 12 13 14     <style type="text/css">   body { background-image:url(https://codebazan.ir/test1.jpg); background-repeat: no-repeat; background-attachment: fixed;    }   </style>     دمو کد ثابت شدن بکگرند  برای تمام صفحه کردن عکس پس زمینه مثلا عکس سایز کوچک خودمونو کشیده و تمام صفحه کنیم.اینجا ی کم تغییرات در کد ایجاد میشه که مقدار  background-image:url(https://codebazan.ir/test1.jpg);  به  background:url("https://codebazan.ir/test1.jpg")  تغییر کرد. 1 2 3 4 5 6 7 background-image:url(https://codebazan.ir/test1.jpg);   به   background:url("https://codebazan.ir/test1.jpg")   تغییر کرد. <style type="text/css">  body {  background:url("https://codebazan.ir/test1.jpg") no-repeat fixed  -0px / 800px ;   }  </style> 1 2 3 4 5 6 7 8 9 <style type="text/css">   body {   background:url("https://codebazan.ir/test1.jpg") no-repeat fixed  -0px / 800px ;    }   </style> شما میتونید اندازه عکس پس زمینه رو خودتون تغییر بدین مثلا ۸۰۰px به ۱۰۰۰px  تغییر بدین و یا هرچقدر دوست دارین  دمو کد تمام صفحه کردن عکس بکگرند  حالا ی کد دیگه برای تمام صفحه کردن عکس بکگرند براتون میزارم که بدون نیاز به هیچ کاری میتونید عکسو تمام صفحه کنید.برای تمام صفحه کردن و فیکس کردن عکس بکگرند کافیه کد زیر رو در هد قالب قرار بدید تا به راحتی بکگرند زیبا و تمام صفحه و … داشته باشید.  <style>.background { background: url(https://codebazan.ir/test1.jpg) no-repeat center top fixed; background-size: cover; }</style> <body class="background"> 1 2 <style>.background { background: url(https://codebazan.ir/test1.jpg) no-repeat center top fixed; background-size: cover; }</style> <body class="background"> دمو کد فوق  گاهی اوقات ممکنه بخواین عکس بکگرند در وسط سایت باشه و دور تا دورش ی رنگی باشه از کد زیر استفاده کنید.  auto #582662;  کاملش اینجوری میشه  <style type="text/css">   body {  background:url("https://codebazan.ir/test1.jpg") no-repeat fixed  -0px / 500px auto #582662;  }  </style> 1 2 3 4 5 6 7 8 9 <style type="text/css">     body {   background:url("https://codebazan.ir/test1.jpg") no-repeat fixed  -0px / 500px auto #582662;  }   </style> دمو کد فوق  اخریشم قرار دادن رنگ پس زمینه به جای عکس  <body style="background:#330033;"> 1 <body style="background:#330033;"> دمو کد  امیدوارم از این اموزش لذت کامل رو برده باشید و نیازتون نسبت به تغییر بکگرند رفع شده باشه  تگ ها :اموزش تغییرات روی بکگرنداموزش قرار دادن تصویر پس زمینهاموزش کامل ویرایش بکگرندسایتبکگرندبکگرندسایتپس زمینهپس زمینه سایتتغییر بک گرند سایتتغییر بکگرند وبلاگتغییر پس زمینه سایتتکرار افقی پس زمینه سایتتکرار عمودی پس زمینه سایتتکرار عمودی و افقی پس زمینه سایتثابت کردن پس زمینهثابت کردن پس زمینه با حرکت اسکرولفیکس کردن بک رگندکاملترین اموزش کاربا بکگرندسایت قبلی کد پاپ اپ از سایت به تلگرام بعدی ابزار ساخت کد پخش انلاین فایل فلش مطالب مشابه کد ایجاد چشمک زدن ستاره در بکگرند سایت فوریه 23, 2017 کد پس زمینه متحرک برفی با تغییر رنگ آوریل 13, 2016 کد ثابت کردن عکس پس زمینه سایت دسامبر 23, 2015 کد تغییر رنگ خودکار صفحه نوامبر 01, 2015 کد تغییر رنگ پس زمینه سایت با سه روش اکتبر 30, 2015 پاسخ دهید وارد شده با نام admin. خروج؟  تصویر امنیتی *  code تصویر امنیتی را وارد کنید: دیدگاه...  جستجو در سایت جستجو در کدبازان... خبرنامه سایت

 

ابتدا کد قرار دادن بکگرندو براتون قرار میدم

با قرار دادن کد فوق در استایل سایت خودو یا هد قالب وبلاگ تصویر پس زمینه سایت شما به صورت موزائیک تکرار خواهد شد.

دمو کد بالا


خب حالا برای اینکه عکس بکگرند ما فقط به صورت عمودی تکرار بشه به استایل کد زیر را اضافه میکنیم

background-repeat:repeat-y;

با اضافه کردن کد بالا به استایل, بکگرند ما به صورت عمودی تکرار خواهد شد

دمو کد تکرار عمودی بکگرند


حالا برای تغییر و تکرار بکگرند به صورت  افقی در کد بالا مقدار y رو به x تغییر دهید.

background-repeat:repeat-x;

دمو کد تکرار افقی عکس بکگرند


برای اینکه عکس بکگرندمون تکرار نشه از کد زیر استفاده میکنیم

 background-repeat: no-repeat;

دمو کد تکرار نشدن عکس بکگرند


 

حالا میخوایم تا با حرکت اسکرول عکسمون ثابت باشه و از جاش تکون نخوره کد زیر را به استایلمون اضافه میکنیم

background-attachment: fixed;

این میشه

دمو کد ثابت شدن بکگرند


برای تمام صفحه کردن عکس پس زمینه مثلا عکس سایز کوچک خودمونو کشیده و تمام صفحه کنیم.اینجا ی کم تغییرات در کد ایجاد میشه که مقدار

 

شما میتونید اندازه عکس پس زمینه رو خودتون تغییر بدین مثلا ۸۰۰px به ۱۰۰۰px  تغییر بدین و یا هرچقدر دوست دارین

دمو کد تمام صفحه کردن عکس بکگرند

حالا ی کد دیگه برای تمام صفحه کردن عکس بکگرند براتون میزارم که بدون نیاز به هیچ کاری میتونید عکسو تمام صفحه کنید.برای تمام صفحه کردن و فیکس کردن عکس بکگرند کافیه کد زیر رو در هد قالب قرار بدید تا به راحتی بکگرند زیبا و تمام صفحه و … داشته باشید.

دمو کد فوق


گاهی اوقات ممکنه بخواین عکس بکگرند در وسط سایت باشه و دور تا دورش ی رنگی باشه از کد زیر استفاده کنید.

auto #582662;

کاملش اینجوری میشه

دمو کد فوق


اخریشم قرار دادن رنگ پس زمینه به جای عکس

دمو کد

امیدوارم از این اموزش لذت کامل رو برده باشید و نیازتون نسبت به تغییر بکگرند رفع شده باشه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code