Background image going outside contents on mobile screen size

Question

I have designed a website which is responsive. I am using fixed background image in some of my web pages. Issue is, on mobile screen the image is not responsive, it's going outside the boundary(content). .. I have googled to find out a reason but the only way that i found there was to convert image to wbmp format.

When i convert the image into wbmp, the html didn't accept at all. .. Any idea to let the image display on small screens in responsive manner?
Or any tool that i should use?

css

body{
    background:url(../images/gallery-1-big.jpg) center center fixed no-repeat;
    background-size:cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-backface-visibility: hidden;
opacity: 0.8;
}

The same piece of code for mobile screen let the image get distorted and when i tried the below piece of code then the image shows but only on top half of screen

@media (max-width: 480px) {
body
{
    background:url(../images/gallery-1-big.jpg)  fixed no-repeat;
    background-size:100%;

}

Possible duplicate of [Responsive css background images](http://stackoverflow.com/questions/12609110/responsive-css-background-images) — Shiham, Aug 31 '16 at 09:35
If you are using jQuery consider using Vegas plug in https://vegas.jaysalvat.com/ — SandroMarques, Aug 31 '16 at 09:39

score 0 · Answer 1 · answered Aug 31 '16 at 09:33

0

you need to give width:100% and height:100% to the image in the css...

body
{
   background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

answered Aug 31 '16 at 09:33

Anoop Passi

1

Iván Rodríguez Torres · Answer 2 · 2016-08-31T10:35:55.777

0

Here you can check the compatible image formats.I think that for a background image is better to use png format.

If you have your image as a background,you should set backgroud-size to cover or 100%.

You can check this website, which has very good examples.

Edit

Okey, I made this fiddle to show you what is happening. When you use images as background they can be responsive, but if you want a perfect fit you need that the image has the same ratio as its container, in your case the body. If the image has the same aspect ratio everything is fine with background-size:100%.

The problem comes when they are not the same ratio. If you use background-size:100% the image will fit in one dimension(width or height) but not in both, because this will produce the image to stretch or expand, deforming the image. To solve this, you can use background-size:cover and this will make the image fill all the body but its probably that some parts of the image will be hidden to get the perfect fit.

edited Aug 31 '16 at 10:35

answered Aug 31 '16 at 09:34

Iván Rodríguez Torres

4,293
3
31
47

add `background-size:100%;` just in the next line of your 'background:...` – Iván Rodríguez Torres Aug 31 '16 at 10:12
Is better for you to edit your answer and put your code, at least the relevant part on it. Better help could be provided – Iván Rodríguez Torres Aug 31 '16 at 10:13
@bc110402307SyedZeeshanHaide I updated my answer too – Iván Rodríguez Torres Aug 31 '16 at 10:36
ohhhhhh myy goodness! ... I just write html.body{height:100%;} and it worked for me – bc110402307 Syed Zeeshan Haide Aug 31 '16 at 10:47

score 0 · Answer 3 · answered Aug 31 '16 at 09:41

This should do the trick:

body {
background: url(background-photo.jpg) center center cover no-repeat fixed;}

The important part is the background-size: cover; which tells the browser to scale the image proportionaly. It depends on what image you use.

If you have a image which is wider than tall, it will be outside the boundaries on a smartphone, which is held in portrait mode.... And other way around of course, if your image is taller than wide, it is displayed correctly in portrait mode, but will have issues in landscape mode...

If you use jpg or png is up to you. Just look how big the picture is, and choose the format, which has the smaller size.

no, that's why sitting confused. Upto tablet it's working perfectly but on smartphones i don't know what's wrong with this — bc110402307 Syed Zeeshan Haide, Aug 31 '16 at 09:49

score 0 · Answer 4 · answered Aug 31 '16 at 10:49

0

I was just missing this piece of code. I put it on the top of my css and removed media queries and my issue get resolved

html, body {
    height:100%;
}

answered Aug 31 '16 at 10:49

bc110402307 Syed Zeeshan Haide

454
11
32

Background image going outside contents on mobile screen size

4 Answers4