I wanna show diffrent images as per the device

Question

I use two diffrent image in my project as backgrouund because both have diffrent designs and desktop image looking odd in mobile devices.so is it possible to show BG image as per mobile device.Here is the demo which i create https://codeslide.in/contact.

am using codeigniter framework.Below is code as i use two images in css but not working.

// Step 3 - Instilize the plugin by #id selector
VANTA.BIRDS({
  el: "body",
  colorMode: "varianceGradient",
  wingSpan: 23.00,
  speedLimit: 8.00,
  separation: 60.00,
  alignment: 35.00,
  cohesion: 24.00,
  backgroundAlpha: 0.36,
 }})

body {
  background-image: url("http://www.sclance.com/backgrounds/svg-background-image/svg-background-image_2162863.jpg");
}
 @media only screen and (max-width: 600px) {
  body {
    background-image: url("https://images.unsplash.com/photo-1527335480088-278dbeec0ad5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
  }
}
}
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.birds.min.js"></script>
<div class="body">

Are you sure that your phone's screen is only 600 pixels wide? some phones have bigger screens, and people can rotate the phone to get even more width. As far as I know there is no way to reliably detect with pure css that it's a phone. — potato, Jul 30 '19 at 12:06
@potato Every user has their own screen size.I use this method from here.https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_bg — Codeslide Creation, Jul 30 '19 at 12:10

potato · Answer 1 · 2019-07-30T12:33:21.620

0

Using the @media rule is unreliable because some phones have wider screens, and people can rotate their screen to make it even wider.

You can use javascript to add a class to the body element if it detects the window.orientation property (which tells you how the phone's screen is rotated)

if (window.orientation !== undefined) {
  document.body.classList.add("mobile");
}

(according to this answer)

Full example code

<html>
   <head>
      <script>
         if (window.orientation !== undefined) {
            document.body.classList.add("mobile");
         }
      </script>
      <style>
         body{
            background-color: green;
         }
         body.mobile{
            background-color: blue;
         }
      </style>
   </head>
   <body>
      Body should have different background color depending on the device.
   </body>
</html>

edited Jul 30 '19 at 12:33

answered Jul 30 '19 at 12:03

potato

995
11
19

Not Working i add above lines `` – Codeslide Creation Jul 30 '19 at 12:17
It is `javascript` code, not `css` code, it needs to be in a ` – potato Jul 30 '19 at 12:19
i added this code `if (window.orientation !== undefined) { document.body.classList.add("mobile"); }` above of vanta.birds but the problem is same. – Codeslide Creation Jul 30 '19 at 12:29
here is the paste https://pasteshr.com/6fXavyEKEL changes i made but still not working. – Codeslide Creation Jul 30 '19 at 12:43
there seems to be a part in the code that I wasn't aware of, the `#wrapper` is probably covering the `body` background. You need to either use an element as the background or use the body's background property, they are not interchangeable. – potato Jul 30 '19 at 12:59

score 0 · Accepted Answer · answered Jul 30 '19 at 12:30

Use media query for this i have write some code for you, you can use this, if i am right..

body {
 background-image: url("http://www.sclance.com/backgrounds/svg-background-image/svg-background-image_2162863.jpg");
}


/** For Mobile Device landscape and portrait view **/

@media (max-width:767px){
body {
 background-image: url("https://images.unsplash.com/photo-1527335480088-278dbeec0ad5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
}

}

/** For I pad portrait view**/

@media (min-width:768px) and (max-width:991px) {
body {
 background-image: url("https://i0.wp.com/www.wwhf.org/wp-content/uploads/2014/04/bokeh-cover-bg.jpg?ssl=1");
}

}

/** For I pad landscape view**/

@media (min-width:992px) and (max-width:1024px) {
body {
 background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSI3Elr_JO2Y8pkoTb0QhVw91qcUOwhWrNlPX3icMrLqylfMk8u");
}

}

<body>
some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text

</body>

@Codeslide Creation if is this helpful for you please do up-vote is this helpful for me — Sunil R., Jul 30 '19 at 13:02

I wanna show diffrent images as per the device

2 Answers2

Full example code