اموزش قرار دادن تصویر پس زمینه
اموزش قرار دادن تصویر پس زمینه یکی از اموزشهای کامل برای تمام تغییرات روی پس زمینه میباشد که میتوان از تکرار عمودی,افقی,تمام صفحه کردن,ثابت کردن و..نام برد. برای تغییرات روی عکس پس زمینه سایت میتوانید از css استفاده کنید.شما میتوانید تصاویر پس زمینه را به صورت عمودی,افقی به صورت تکرارشونده و یا ثابت قرار دهید.در ادامه اموزش کامل را برای شما قرار دادیم تا بتوانید با بکگرند سایت خود بازی کنید و به دلخواه خود تغییر هید.
ابتدا کد قرار دادن بکگرندو براتون قرار میدم
<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>
حالا برای تغییر و تکرار بکگرند به صورت افقی در کد بالا مقدار y رو به x تغییر دهید.
background-repeat:repeat-x;
<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>
حالا میخوایم تا با حرکت اسکرول عکسمون ثابت باشه و از جاش تکون نخوره کد زیر را به استایلمون اضافه میکنیم
background-attachment: fixed;
این میشه
<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")
تغییر کرد.
<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">
گاهی اوقات ممکنه بخواین عکس بکگرند در وسط سایت باشه و دور تا دورش ی رنگی باشه از کد زیر استفاده کنید.
auto #582662;
کاملش اینجوری میشه
<style type="text/css">
body {
background:url("https://codebazan.ir/test1.jpg") no-repeat fixed -0px / 500px auto #582662;
}
</style>
اخریشم قرار دادن رنگ پس زمینه به جای عکس
<body style="background:#330033;">
امیدوارم از این اموزش لذت کامل رو برده باشید و نیازتون نسبت به تغییر بکگرند رفع شده باشه