0

I've been searching for this problem for a while, but since I can't find any working solution I decided to ask. I'm trying to implement some resposiveness to my site.While I use the inspect element tool of google chrome, the background is showed correctly and if I go on it on my mobile phone, the background is actually too zoomed. I've tried to put the scroll attachment, but it doesn't work.

This is the piece regarding the background. 

.background2p{
 background: url('background2.jpg') fixed no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="Risorse/css.css" rel="stylesheet" type="text/css">
 </head>
 
 <body class="background2p">
 </body>
</html>
Chaos
  • 1
  • it's because the image you are trying to use it's optimized for desktop ratio (16:9/ 16:10) and when on mobile (portrait) (read this to get along with ratio on mobile http://stackoverflow.com/questions/7199492/what-are-the-aspect-ratios-for-all-android-phone-and-tablet-devices ). Get another image as a background for mobile devices with will be cut of to have a ratio of 9:16 or so. The media query won't load the image until there is a mobile device size so don't worry about the file optimization. – Dinca Adrian Mar 24 '17 at 12:02

1 Answers1

0

this is zoomed because of background-size: cover; the ratio of width to height of your background pic is not suitable for element dimension

you may either use another background image for mobile only with proper dimension according to mobile screen (see responsive view in desktop browser to find the dimension) or you may use background-size: contain;. In second case you may see some white space in background but you would see image completely

Rakesh Soni
  • 41
  • 4