آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
قرار دادن تصویر زمینه تمام صفحه سایت بدون مشکل

قرار دادن تصویر زمینه تمام صفحه سایت بدون مشکل
سلام. یکی از مشکلات طراحان قالب قرار دادن و فیکس کردن تصویر زمینه در قالب وبسایت ها است. بکگراند هایی که به صورت تمام صفحه هستند و تکرار نمی شوند.
برای قرار دادن تصویر در وسط صفحه به طوری که در تمام مرورگر ها به درستی نمایش داده بشه باید از کد زیر استفاده کنید. در کد زیر به جای “آدرس” باید آدرس تصویر زمینه خودتون رو قرار بدید.

background: url(آدرس) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='آدرس', sizingMethod='scale');
-ms-filter:
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='آدرس', sizingMethod='scale')";

امیروارم به کارتون بیاد.

69 پاسخ به “قرار دادن تصویر زمینه تمام صفحه سایت بدون مشکل”

  1. saeed512 می‌گه:

    اونای که تکرار میشوند چی؟

  2. مهدی می‌گه:

    سلام
    وب جالبی داری
    امیدوارم تو این راه موفق بشی
    یه انتقاد سازنده دارم
    این باکس های که توش کدهای css قرار گرفته رو کاری کنید که وقتی کدها زیاد شد اسکرول باکس فعال بشه
    overflow: auto

    از آشنایی با مای دیزاین خوشحال شدم
    یا علی

  3. یاشار نظری می‌گه:

    مرسی به درد خورد

  4. محمد هادی می‌گه:

    داداشی میگم تصویر من تکرار میشه اما تصویر پس زمینه اصلی نیست پس زمینه ی منوی بالای سایت ئه ! بعد مشکلم اینجاست سایز صفحه وقتی کوچیک تر میشه
    یعنی وقتی که به حدی کوچیک میشه که overflow-x فعال میشه اون تصویر تمام صفحه بودنش رو از دست میده

  5. هانی می‌گه:

    مرسی ازت بابت توضیح کارگشات

  6. نصرالله می‌گه:

    با سلام
    این کد را دقیقا کجا قرار بدم تا کار کنه/داخل استایل قالبم که قرار دادم کار نکرد شاید جای درستی قرار نمیدم؟

    • علی همایونی می‌گه:

      سلام.
      کد رو داخل فایل استایل و داخل body قرار بدید. برای مثال:

      body {
      background: url(آدرس) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter:
      progid:DXImageTransform.Microsoft.AlphaImageLoader(src='آدرس', sizingMethod='scale');
      -ms-filter:
      "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='آدرس', sizingMethod='scale')";
      }
  7. مهرناز می‌گه:

    سلام ببخشید نتونستم بزارم.چرا نمیشه؟هیچی نمیاد

  8. h a می‌گه:

    من انجام دادم.واقعا دستتان درد نکند

  9. مرتضی می‌گه:

    سلام این کد رو قرار دادم ولی نمیشه چرا؟
    body

    background: url(http://s1.freeupload.ir/i/00029/paigyolt2xgx.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter:
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://s1.freeupload.ir/i/00029/paigyolt2xgx.jpg', sizingMethod='scale');
    -ms-filter:
    "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://s1.freeupload.ir/i/00029/paigyolt2xgx.jpg', sizingMethod='scale')";
  10. مرتضی می‌گه:

    خیلی منون از سایتتون وراهنماییتون،جواب داد تشکر

  11. امین شیرخانی می‌گه:

    به جان خودم دهنم سرویس شد تا این مطلبو پیدا کنم
    خیلی آقایی علی جون
    موفق و پیروز باشی

  12. komeil می‌گه:

    ممنون
    خیلی دنبالش بودم کمکم کرد
    موفق باشی

  13. یه دوست قدیمی می‌گه:

    ممنون داداامشب به دردم خورد :*

  14. s می‌گه:

    سلام..
    من صفحه های سایتم رو توی draemweaver با زبان html طراحی کردم اما توی هر مرورگر و سیستمی یه جور باز میکنه.. یعنی توی بعضی از مرورگر ها توی تمام صفحه نشون میده و درسته… اما توی بعضی ها نصفه مرورگر رو میپوشونه لطفا راهنماییم کنید ممنون

  15. پریسا می‌گه:

    حرف نداری خیلی دنبال این بودم یه دنیا ممنوووووووووووووووووووووووون

  16. همون می‌گه:

    عالییییییییییییییییییییییییی بووووووووود ممنون

  17. فرشید می‌گه:

    خیلی ممنونم کار منو خیلی راه انداختم.
    فوق العاده بود.

  18. mohsen karimi می‌گه:

    مرسی
    عالی بود
    واقعا ممنون

  19. مهدی می‌گه:

    سلام بسیار عالی بود ممنون خدا خیرت بده.

  20. محمد می‌گه:

    سلام ببخشید کد رو باید کجا قرار بدی ….توی function?

  21. حسام ثنایی فرد می‌گه:

    سلام اقا علی خسته نباشد.این کد رو بعد گذاشتم ولی فقط نوشته میاره.خواهش میکنم راهنماییم کنید ممنون 🙂
    body{no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter:
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://s6.picofile.com/file/8197471418/Religious_39.jpg’, sizingMethod=’scale’);
    -ms-filter:
    “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://s6.picofile.com/file/8197471418/Religious_39.jpg’, sizingMethod=’scale’)”;

    }

  22. حسام ثنایی فرد می‌گه:

    بادی

  23. شایان می‌گه:

    اقا دستت درد نکنه .. کارم راه افتاد

  24. مژگان می‌گه:

    وقتی بخاهیم یه فوتر تمام صفحه داشت باشیم بدن اینکه رسپانسیو باشه و وقتی مرو گر کوچیک شد اسکرول بخوره باید چیکار کنیم؟

  25. مژگان می‌گه:

    وقتی بخاهیم یه فوتر تمام صفحه داشت باشیم بدن اینکه رسپانسیو باشه و وقتی مرو گر کوچیک شد اسکرول بخوره باید چیکار کنیم؟
    over flow کدوم div رو outo کنم ؟میشه لطف کنید یه فایل قالب که فقط شامل هدر و فوتر و کانتینر باشه و قسمت هدر و فوترش تمام صفحه باشه برام بفرستید میخام با کوچیک و بزرگ شدن صفحه اسکول بخوره خیلی مممنون میشم

  26. سارا می‌گه:

    من کد رو گذاشتم ولی هنوز بکگراند توی گوشی چندتایی میشه لطفا راهنمایی کنید

  27. فرید می‌گه:

    خط ۶ به بعد چی هست؟ من تو w3 پیدا نمیکنم!

  28. سهیل می‌گه:

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

  29. محمد می‌گه:

    بسیار سپاس گذارم خیلی بدردم خورد

  30. احمد می‌گه:

    این رو گذاشتم ولی تکرار نمیشه

  31. کیوان می‌گه:

    سلام می خواستم بدونم چگونه اول سایتتون رو درست کردید که که عکس در یک لایه پایین تر ثابت است

  32. عطریاس می‌گه:

    سلام آقای همایونی
    من این کدرو نوشتم ولی صفحه مسترپیجم همچنان سفیده یعنی اینکه میتونم از رنگهای پیش فرض استفاده کنم ها ولی من میخوام یه تصویر قرار بدم که متاسفانه هر کاری میکنم نمیشه ضمنا من با ASP.NETکار میکنم احتمال داره مشکل از اونجا باشه ؟از صفحه کدمم عکس گرفتم ولی راهی نیست که براتون بفرستم.
    لطفا راهنماییم کنید من باید تا چند روز دیگه پروژم و تحویل استادم بدم ولی دیزاینش درست نمیشه.

    • علی می‌گه:

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

      • عطریاس می‌گه:

        نه متاسفانه هنوز آنلاین نیست .ولی من دقیقا همین کد را کپی کردم و به جای آدرسش “background.png ” که اسم عکسم هست رو نوشتم در ضمن تمام عکس هایی رو هم که در طول مسیر از آنها استفاده شده رو هم داخل یک فولدر در ویژوال استودیو جمع آوری کردم .برای هدر از این کد استفاده کردم و هدر نمایش داده میشه
        آیا این امکان وجود داره اجرا نشدن تصویر پس زمینه به دلیل نوع آدرس دهی باشه؟
        در ضمن بابت قرار دادن این مطلب و پاسخ دهی شما بینهایت سپاس گذارم
        در پناه حق . یا علی …

      • علی می‌گه:

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

پاسخ دهید

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

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
لایه باز مجموعه آیکون های گوگل پلاس
ذخیره کردن یکجای تمام ابزار های فتوشاپ
آموزش تصویری ساخت صفحه روشن و خاموش شونده
تصویر زمینه October سال ۲۰۱۲
برای هر دسته در وردپرس قالب جداگانه بسازید
آموزش ساخت منو های آبشاری با استفاده از HTML و CSS