Zoomed and blurred background image for mobile

[LaOpala]

url:webdisenor.epizy.com

my website works good in pc or laptop but when it is viewed an actual mobile the background image too much zoomed due to which i get blurred background image for mobile devices

the code for background image for whole body is below

body {
 background-image: url("images/wood1.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size:cover;
 background-position: center;
 width:100%;
 height:100%;  
 margin:0;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

}

so kindly please help me out with this.

[TigerMANEK426]

It is not possible to zoom the image out without changing your setup completely.

[adisp007]

What is your background original size?
Perhaps you’re watching the background on a smartphone with high resolution display, but your background original size is small.
Furthermore, your CSS is using:

background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

& of course PC & smartphone have different types of orientation (landscape/portrait).

For example:
Your background/image original size: 800x600 px (landscape)
Your PC resolution: 1280x800 px (landscape)
Your smartphone resolution: 750x1334 px (portrait)

Then:

cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges.

That image on PC is still good because their size ratio are still balance, eventhough the image must be scaled up to cover entire screen.

But the image on smartphone is bad.
The high of image is only 600 px. The high of smartphone is 1334 px. Because of orientation different, the gap is too much.
That 600 px must be scaled up until it fills (cover) the entire screen (1334 px). Of course it will becomes blurry when it’s enlarged beyond its own size.

Other value beside cover:

contain , on the other hand, says to always show the whole image, even if that leaves a little space to the sides or bottom.

The default keyword — auto — tells the browser to automatically calculate the size based on the actual size of the image and the aspect ratio.

& you can also use the actual image size:
background-size: 800px 600px;

[Oxy]

@LaOpala

edit inlat.css

on line 562 find this

@media only screen and (max-width: 400px) {
  body{
   background-image: url("images/wood.jpg");
    background-repeat:repeat;
  background-attachment: fixed;
  background-size:cover;
 background-position: center;
 width:100%;
 height:100%;  
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
 margin:0;
 font-family:italic; 

}

and modify the background image to use wood1.jpg not wood.jpg (as used in the body)

you briefly change this
background-image: url("images/wood.jpg");

into this

background-image: url("images/wood1.jpg");

after the change, delete the cache in the mobile device