تغییرات در فایل html بکگراند تصویر

سوال

سلام
وقت بخیر
یه کد از html دارم که بکگراند قرار میده در وبسایت و بخوبی کار می کنه…
حالا اگر بخوام بهش بگم این تعداد فایل در این فولدر رو با هر بار ریلود پیج، در بکگراند قرار بده چه چیزی رو باید اضافه کنم بهش…
این کد HTML :

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
<!DOCTYPE html>
<html>
 
<head>
<meta charset="UTF-۸">
 
<title>Full Page Background Image | Progressive</title>
 
<style>
* { margin: ۰; padding: ۰; }
 
html {
background: url(images/back.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 
#page-wrap { width: ۴۰۰px; margin: ۵۰px auto; padding: ۲۰px; background: white; -moz-box-shadow: ۰ ۰ ۲۰px black; -webkit-box-shadow: ۰ ۰ ۲۰px black; box-shadow: ۰ ۰ ۲۰px black; }
p { font: ۱۵px/2 Georgia, Serif; margin: ۰ ۰ ۳۰px ۰; text-indent: ۴۰px; }
</style>
</head>

این هم کد CSS:

۱
۲
۳
۴
۵
۶
۷
html {
background: url(images/back.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

تشکر

حل شد 0
۱۳۹۸/۱/۵ ۱۴:۴۲:۱۸ 4 پاسخ کاربر تازه 0

پاسخ ها ( 4 )

  1. SOLTANE GHALBHA
    0
    ۱۳۹۸/۱/۵ ۲۰:۲۹:۵۷
    پاسخ

    سلام

    متوجه منظورتون نشدم، شفاف تر بیان کنید

    • امیر
      0
      ۱۳۹۸/۱/۶ ۸:۰۷:۱۶
      پاسخ

      بنده یک سایت دارم که قی الحال درون آن یه تصویر به عنوان پیش زمینه قرار دادم

      البته توسط ۲ تا کد بالا که یه html است و دیگری css که این کار انجام دادم و تصویر رو بصورت تمام صفحه و رسپانسیو در بکگراند قرار داده

      حالا می خوام ببینم ، میشه تکه کد دیگری اضافه کرد که ، تصاویر متعددی رو از داخل پوشه image بگیره و با هر لود صفحه، اتومات تعویض کنه.

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

       

      https://my.bmi.ir/portalserver/signin

  2. SOLTANE GHALBHA
    0
    ۱۳۹۸/۱/۶ ۹:۳۰:۴۵
    پاسخ

    برای این کار دوست عزیز هم میتونید از PHP و هم از Jquery استفاده کنید

    و از اونجایی که صفحه HTML دارید، کد جی کوئری رو براتون قرار میدم که استفاده کنید:

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    <html>
     
    <head>
     
    <script type="text/javascript">
    var totalCount = ۶;
    function ChangeIt()
    {
    var num = Math.ceil( Math.random() * totalCount );
    document.body.background = 'img/'+num+'.jpg';
    document.body.style.backgroundRepeat = "repeat";// Background repeat
    }
     
    </script>
    </head>
     
    <body>
     
    www.beporsam.ir </br>
    beporsam@gmail.com
     
    </body>
     
    <script type="text/javascript">
    ChangeIt();
    </script>
     
    </html>

    • یک پوشه بسازید به اسم img و تصاویرتون رو داخلش قرار بدید.
    • نام گزاری تصاویر باید از ۱ شروع بشه به بالا.

    ۱
    ۲
    ۳
    ۴
    ۱.jpg
    ۲.jpg
    ۳.jpg
    ....

    سپس هر تعداد تصویر که دارید، در خط ۶ ، تعداد تصاویر رو وارد کنید.

    سورس کد را دانلود کنید تا بهتر متوجه بشید.

    موفق باشید.

  3. امیر
    0
    ۱۳۹۸/۱/۶ ۱۰:۴۶:۱۰
    پاسخ

    ممنون

    درست شد

    اما چطور بیام یکاری کنم که از css هم تبعیت کنه

    یعنی :

    ۱- تصاویر وسط در وسط و  در کل صفحه ( ( دسکتاپ و موبایل) مثل نمونه قبلی که کدش رو قرار دادم)

    ۲- ریسپانسیو باشند ( ( دسکتاپ و موبایل) مثل نمونه قبلی که کدش رو قرار دادم)

    ۳- تکرار نشند تو صفحه ( ( دسکتاپ و موبایل) مثل نمونه قبلی که کدش رو قرار دادم)

  4. SOLTANE GHALBHA
    0
    ۱۳۹۸/۱/۶ ۱۱:۵۱:۵۲
    پاسخ

    شما مثل کد HTML که یه تگ <style> باز میکنید و شروع به نوشتن Css میکنید، در اینجا هم همونه؛ تغییری نکرده(فقط ما برای اینکه با هر بار رفرش صفحه یک عکس به عنوان پس زمینه قرار بگیره، از جی کوئری استفاده کردیم)

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶
    ۷
    ۸
    ۹
    ۱۰
    ۱۱
    ۱۲
    ۱۳
    ۱۴
    ۱۵
    ۱۶
    ۱۷
    ۱۸
    ۱۹
    ۲۰
    ۲۱
    ۲۲
    ۲۳
    ۲۴
    ۲۵
    ۲۶
    ۲۷
    ۲۸
    ۲۹
    ۳۰
    ۳۱
    ۳۲
    ۳۳
    ۳۴
    ۳۵
    ۳۶
    ۳۷
    ۳۸
    ۳۹
    <!DOCTYPE html>
    <head>
     
    <script type="text/javascript">
    var totalCount = ۶;
    function ChangeIt()
    {
    var num = Math.ceil( Math.random() * totalCount );
    document.body.background = 'img/'+num+'.jpg';
    }
     
    </script>
     
    </head>
    <style>
    * { margin: ۰; padding: ۰; }
    body {
    background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    </style>
    <body>
     
    www.beporsam.ir </br>
    beporsam@gmail.com
     
    </body>
     
    <script type="text/javascript">
    ChangeIt();
    </script>
     
    </html>

    من همون کدهای css که شما نوشته بودید، در فایل بالا نوشتم

    بهترین پاسخ

ارسال یک پاسخ