CODEWITHSUNDEEP
cssmobileresponsive-design
PatonPlace
PatonPlace

Reputation: 21

Having issues with CSS on mobile displaying background image in portrait format

I am relatively new to programming and trying to get a background image to display on mobile. It seems to work OK on mobile landscape but not on mobile portrait. It displays about a 1/3 of the image in portrait. I have tried height: 100% width: 100%, background-position: center, background-size: cover. I also tried to create another image 290px in width and then use media queries to call that image. Neither of these things have worked. Any help to get this solved would be greatly appreciated?

Upvotes: 0

Views: 1708

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25495

Here's another suggestion for you.

What you are trying to do isn't easy because you're wanting your design to work on all viewports or screensizes, and at the same time, you have some text info that should always be visible.

Here's one suggestion for you:
https://codepen.io/panchroma/pen/Lmjwyv

The important bits are:

(1) You want to add a viewport meta tag in the head of your document, this will stop smartphones from scaling content to fit the screen 

<head>  
...  
<meta name="viewport" content="width=device-width, initial-scale=1">  
...
</head>

More about viewport meta tags here

(2) Change the positioning of your background image to left bottom, then the critical text will remain in view at different viewports 

background-image: url(images/ComingSoon.jpg);
...
 background-position:left bottom;  
...  
}

(3) Building on what you started, create a second portrait format background image for mobile, then use a media query to show it below whatever viewport works best for your design 

@media  screen and (max-width: 600px) {
    /* Small screen, non-retina */
 .bgimg { 
   background-image:    url(images/ComingSoon_Small_Portrait.jpg); 
       background-size: contain;
  } 
}

Here's an example of what I'm thinking of

Background size wouldn't necessarily need to be 'contain', I'm just illustrating that it could be different from the setting for desktop.

Good luck!

Upvotes: 1

haugsand
haugsand

Reputation: 420

What is the intended behavior?

background-size: contain;

Scales the image as large as possible without cropping or stretching the image.

background-size: cover;

Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

(from https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)

If you want to show the whole image, without cropping, you need to use background-size: contain;. The image will then no longer fill the whole background in portrait mode, and you probably want to add background-repeat: no-repeat; as well.

Upvotes: 0

Related Questions