Background image looks bad on mobile devices

Hi,

I´m very happy with the way my site www.howtobookyourtrip.com looks on a computer screen. BUT when I enter the site from a mobile device it looks incredibly messy. It´s like the image doesn´t adjust to the smaller screen.

Atm I use this CSS:

body.home {
	background-image: url("http://howtobookyourtrip.com/wp-content/uploads/2017/04/Tuscany-4-1.jpg"); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100pn;
  height: 100pn;
	width: 100pn;
	background-repeat: no-repeat;
	background-position: center;
  background-attachment: fixed;
}

Do you have any idea what I can do to make the image look good on a smaller device?

Hello @axelarnberg,

I noticed two issues in your custom CSS code.

  1. pn doesn’t seem to be valid CSS unit. You can learn more about it here:
    https://www.w3schools.com/cssref/css_units.asp

  2. You didn’t set background-size: cover;, prefixes are for old browsers.

So please try this:

body.home {
    background-image: url("http://howtobookyourtrip.com/wp-content/uploads/2017/04/Tuscany-4-1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

I followed your instructions but I still can´t see the image very well on the mobile screen. It´s like it doesn´t adjust to the smaller screen. Instead I just see a small part of the image…

Can I do something like below, or do you have any other suggestions?

@media screen and (min-width: 400px) and (max-width: 500px) {
.body {
background-image: url("http://howtobookyourtrip.com/wp-content/uploads/2017/04/Tuscany-4-1.jp);
}
}

Hello @axelarnberg,

That is normal behavior of background that has background-size: cover;

This link might help you to better understand background-size: cover; property/value pair:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Kind Regards, Roman.

I have checked the link and it´s instructive. But do you mean that it´s impossible for me to make that image look good both on computer and mobile device? And if so why is that? I have seen other sites with images that look good both on a big and on a small screen.

Hello @axelarnberg,

Actually you can experiment with media queries (you mentioned it above), I think that it can help you to achieve nice mobile view.

Kind Regards, Roman.