Resize background image

Unite Theme
1

Firstly, my apologies for asking what is probably novice question, the little I do know is self taught so please bare with me.

I am trying to have the background image scale with the device the page is being viewed with. This is my test site here

I have tried

background-size: contain;

in my style css, but whatever I try does not work.

Any help gratefully recieved :slight_smile:

2

Large cover images that automatically adapts to device screen size are used like this. This will definitely not going to work in your case with your small image which is floated to one side.

body.custom-background { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

With your small image size it is the best it can be and only switching to large image would make difference. Then my code given above will do wonders.

3

Thank you Aigars, works for monitors perfectly, but my image I can see is not so good for mobile phones, is there a correct way to remove a background image for small screens?

Thanks again :slight_smile:

4

You can use CSS @media queries for that. By adding this code to Theme Options - Other - Custom CSS it will get rid of background image altogether on device with screen resolution width lower than 767px, so all mobile devices except tablets.

@media (max-width: 767px) {
  body.custom-background {
    background: none;
  }
}
5

Ah my Galaxy S5 counts as a tablet, with a screen res of 1080 x 1920, I guess I will have to loose the background image, it just doesn’t look right :frowning:

Thanks again for your help

6

Not it is not tablet sized since it uses only 640 x 360 of your Full HD resolution for web browsing. Apple call it “Retina” but any smartphone maker out there uses the same technique. Showing your website in Full HD resolution on smartphone would make your eyes bleed to actually read something.

In your case you have added more and more code and you haven’t removed any of my previously given code, so you have to force these changes by adding !important at the end like this:

@media (max-width: 767px) {
  body.custom-background {
    background: none !important;
  }
}
7

Perfect, thank you :slight_smile: