Responsive background image for mobile

Hi there -

I know Activello is a responsive theme, but for some reason when I view my site on my iphone, the background image is still full-size, and therefor doesn’t show up in its entirety. Is there some way to fix this?

Address is as follows: blog.wiseapplevintage.com

Thanks in advance!

Hi @wiseapple,

Thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS


@media (max-width: 767px){
div#logo {
    margin-top: 20px;
}
}

Best Regards,
Movin

Hmm, that doesn’t seem to make any difference. I suspect it has to do with some of the other custom CSS I have in my theme, as the layout just looks kind of odd in mobile view.

Not a big deal - just thought I’d ask! Thanks for your help! :slight_smile:

The provided CSS should work as i have tested it on your site.

I visited your site but didn’t find anywhere the provided CSS in the page markup.

Could you please tell me where you have added it?

Hello again -

I had tried it, but when it didn’t seem to work, I just took it out again.

Have added the custom CSS back in - it’s the very last thing I added to my custom CSS file.

Thanks for looking at this again - I really appreciate it!

I visited your site again and saw it’s working fine for me. Please see the attached before and after screenshots of it.

If you are not getting the same result then please try clearing your browser cache.

Hmm, it looks a bit different on mine for some reason. I’m realizing now that it must actually be the search bar that’s causing problems as opposed to the background. I’m attaching a screen shot of my mobile view - is there some way to get that search form to sit on the same line with the menu ‘hamburger’ so it doesn’t take up so much room? I love the way it looks on your mobile view!

To make it work on smaller device screen could you please try using the below CSS code?

@media (max-width: 300px){

html body.custom-background{
  background-image: none;
}

#masthead > .container:before{
  display: block;
  height: 131px;
  width: 100%;
  background-image: url('http://blog.wiseapplevintage.com/wp-content/uploads/2016/06/another-header-image-test-3.jpg');
  background-repeat: repeat-x;
  background-position: top center;
  background-attachment: scroll;
  margin-top: -75px;
}

}

Tried that code, but unfortunately, it seems to look the same. Sorry this is such a pain, but I really appreciate all of your help!

I tested it gain on your site and it seems you have added the CSS code incorrectly in your site as following which contains incorrect image URL. Please use the exact code that i provided above.

@media (max-width: 300px){

html body.custom-background{
  background-image: none;
}

#masthead > .container:before {
    display: block;
    height: 131px;
    width: 100%;
    background-image: url('http://blog.wiseapplevintage.com/wp-content/uploads/2016/06/another-header-image-test-3.jpg');
    background-repeat: repeat-x;
    background-position: top center;
    background-attachment: scroll;
    margin-top: -75px;
}
}

Hello again -

Sorry about that! Not sure how those extra characters got in there. I’ve copied the CSS you provided exactly, but unfortunately, it still looks the same in vertical view. Now, however, when I turn my phone horizontal, it cuts off the bottom of the background image.

I’ll attach screen shots again.

If this is turning out to be too much trouble, please don’t hesitate to let me know! I think I can live with a mobile version that’s a little bit off.

Thank you! :slight_smile:

I am not sure on what screen size you are testing it. Please test it on Responsinator - blog.wiseapplevintage.com

Also please use both the CSS code i have provided above.

Ah-hah! Checking things on the responsinator website made me realize it must just be that I have an old phone, and that’s why things are displaying in sort of an odd fashion. Everything looks great on the responsinator examples - thank you SO much for all of your help! :slight_smile:

You are most welcome here :slight_smile: