change background when refreshed, but responsive

is background app refresh necessary
google maps background app refresh
apple watch background app refresh
camera running in background android
android screen keeps refreshing
how to stop apps from refreshing
does background app refresh work when app is closed
ios background app refresh

i currently have this javascript code in my head tag which makes the background change every time the page is refreshed. it works great, however, i would like to have different "image sets" (1.png, 2.png, 3.png vs 1mini.png, 2mini.png, 3mini.png), one for the desktop version and another one for the mobile version. any idea on how to do this?

<script>
        function changeImg(imgNumber)   {
            var myImages = ["images/1.png", "images/2.png", "images/3.png", 
           "images/1mini.png", "images/2mini.png", "images/3mini.png" ]; 
            var imgShown = document.body.style.backgroundImage;
            var newImgNumber =Math.floor(Math.random()*myImages.length);
            document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';}
        window.onload=changeImg;
    </script>
`You can go for some queries depending on your device viewport.`
    function changeBg(){
       var width = window.innerWitdh;
        var myImages = ["images/1.png", "images/2.png", "images/3.png", 
                       "images/1mini.png", "images/2mini.png", "images/3mini.png" ];
        if(width > 1200){ // lets say here is a desktop
          document.body.style.backgroundImage = 'url('+ myImages[1] +')';
        }else if(width < 1200 && width > 700){ // some smaller device
         document.body.style.backgroundImage = 'url('+ myImages[2] +')';
        }else { // this can be mobile
         document.body.style.backgroundImage = 'url('+ myImages[3] +')';
        }
    }

How To Turn Off Background App Refresh on Android & iPhone , Your smartphone could be burning through data for stuff you don't need, like those apps and services that are constantly running. Here's how to stop it! how can change background image when page every refresh? Rate this: Please Sign up or sign in to vote. See more: ASP.NET. there is a div tag this tag has background

Working Example

    function changeImg(imgNumber) {

        var myImages = [{
                isMobile: true,
                image: "https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg"
            },
            {
                isMobile: false,
                image: "https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            },
            {
                isMobile: true,
                image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTptDddyBZG4i4cycd6ZIBP2wT8PQKhihUqenZF7GpzlvTZuPghGQ"
            },
            {
                isMobile: false,
                image: "http://sfwallpaper.com/images/background-wallpaper-images-3.jpg"
            }
        ];

        var imgShown = document.body.style.backgroundImage;
        var filteredArray = [];
        if (isMobile()) {
            filteredArray = myImages.filter(function(el) {
                return el.isMobile == true;
            });
        } else {
            filteredArray = myImages.filter(function(el) {
                return el.isMobile == false;
            });
        }
        var newImgNumber = Math.floor(Math.random() * filteredArray.length);
        console.log("newImgNumber", newImgNumber);
        document.body.style.backgroundImage = 'url(' + filteredArray[newImgNumber].image + ')';
    }



function isMobile() {
    var match = window.matchMedia || window.msMatchMedia;
    if (match) {
        var mq = match("(pointer:coarse)");
        return mq.matches;
    }
    return false;
}

window.onload = changeImg;

How To Change Background On Refresh Using PHP, Hello awkward Devs, today I'll be showing you How To Change Background On Refresh Duration: 3:19 Posted: Apr 4, 2017 I have created a website using bootstrap and the responsive features works fine, except for the background color of the div. The elements (images) are stacked but the background color remains only behind the first image in the row. I am looking for a way to extend the background-color on mobile devices. HTML:

You can use media query with different css class that could be use as a background.

@media screen and (max-width: 768px) {
 .img1 {
  background-image: url("1.jpg");
 }
 .img2 {
  background-image: url("2.jpg");
 }
}

.img1 {
 background-image: url("3.jpg")
 }
.img2 {
  background-image: url("4.jpg");
 }

And change shown classes with function.

So you have one function and it is responsive for window size without any additional methods - simply in css file.

EDIT:

<script>
    function changeImg(imgNumber)   {
        var myImages = ["img1", "img2", "img3"]; 
        var newImgNumber =Math.floor(Math.random()*myImages.length);
        document.getElementByClassName(myImages[newImgNumber]).show();}
    window.onload=changeImg;
</script>

And you put display:none; in your css file. So you show only background that was 'randomly' picked.

<html>
   <div class='background'>
     <div class="img1"/>
     <div class="img2"/>
     <div class="img3"/>

Something like that.

vaadin/responsive, Hi, I'm facing an issue with setting responsive layout. background: #ccccc; You can then override the width in your CSS as you wish, but you will need to use the !important to override the Reload to refresh your session. 1- Responsive Image Using Background Size Property. With background-size property, it’s so easy to make a responsive image. You just need to define background image with no-repeat and then define background-size value cover. Let’s have a look example of the code below.

You can set the background image by checking if the device is mobile or desktop.

eg:

i currently have this javascript code in my head tag which makes the background change every time the page is refreshed. it works great, however, i would like to have different "image sets" (1.png, 2.png, 3.png vs 1mini.png, 2mini.png, 3mini.png), one for the desktop version and another one for the mobile version. any idea on how to do this?

<script>
        function changeImg(imgNumber)   {
            var mobileImages =["images/1mini.png","images/2mini.png","images/3mini.png"]; 
            var desktopImages = ["images/1.png", "images/2.png", "images/3.png"]; 

            var imgShown = document.body.style.backgroundImage;

            //this code will return true when device is mobile
            if (navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)) { 
                var newImgNumber =Math.floor(Math.random()*mobileImages.length);
                document.body.style.backgroundImage = 
                                  'url('+mobileImages[newImgNumber]+')';  
            }else{
               var newImgNumber =Math.floor(Math.random()*desktopImages.length);
               document.body.style.backgroundImage = 
                                  'url('+desktopImages[newImgNumber]+')';
            } 
        }


}

        window.onload=changeImg;
 </script>

1502909, Responsive design often freeze, does not refresh, including URL change or F5. It seems to In the background, things seem to continue working fine. I also tested on nightly (Firefox 67) but couldn't reproduce the problem over there. Refresh to Change Background Image php Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time.

Keeping your app responsive, Supporting swipe-to-refresh The worst thing that can happen to your app's responsiveness is an "Application Not you should not perform the work on the UI thread, but instead create a worker thread and See the guide to background processing on Android for more information on possible solutions. how to change the div background color on every refresh..guys can u help me out.

Css Background Image Change Every 5 Seconds, Home Tutorials 5 Useful CSS Tricks for Responsive Design Aigars Silkalns But have you ever thought of changing this background color with JavaScript? the image background, but it change online if the page refresh. all these things. You may change the View mode to On Black to see which areas need more attention. To change the background, copy the background image and paste it on the foreground. Resize and/or drag the background image to reposition. In the Layers panel, drag the background layer below the foreground image layer.

Topic: Revolution Slider images no longer responsive, I have a slider on my posts page that used to work perfectly, but is no longer responsive. to this: I want to change 3 of my 4 slider images to align center center (as in centered no matter how many times I save, clear all caches and refresh the page. The background size cover or contain ignores the position of the image� In Background, select a picture or solid color, or create a slideshow of pictures. In Colors , let Windows pull an accent color from your background, or choose your own color adventure. After you've selected an accent color, scroll down to decide where you want to see the color show up, and whether it looks better in a dark or light setting.

Comments
  • Have you ever heard of srcsets? This might be a solution: developer.mozilla.org/en-US/docs/Learn/HTML/…
  • hi, this seems simple. any idea on how to incorporate those classes or img tags to the javascript code i have?
  • Well ofc, you can use your function - just instead of array with img create array of 'name classes' and than use random on it, So it would generete random picture on your site. Responsivness will be done automatically by media query in you css file. I will edit my post.
  • i've tried this, but it doesn't work. i'm guessing it's cause the code isn't returning true as var newImgNumber =Math.floor(Math.random()*myImages.length); doesn't correspond with myImages anymore
  • @user11136133 I have modified the above code. Try using it again.