[Resolved] Background image, sections on mobile

[David]

Hi

Brought generatepress the other day, i like the options and at present just playing around with those options.

My client wants a nice ‘sexy’ website (his words lol) the importnat bit is it has to also be mobile.

And mobile is where i’ve hit a problem 🙁

I’m using sections
Section #1
Box type: Fluid
Inner box type: Dluid
Top paading: 50
Bottom padding: 350
Background image: (yes)
Parallax effect: enabled

Demo page at: http://opclinic.users40.interdns.co.uk/?page_id=52

The issue:
Viewing on a mobile device in portrait view the above image is not centered (left align) and therefore looks a little rubbish 🙁

I’ve seen a few posts but thought best to start a fresh one as some were older etc, Some said about detecting browser/device and forcing a background but wasn’t sure if this was a page background or section background.

Hope you can advise 🙂

[Tom]

Hi David,

Mobile can be a pain when it comes to background images because of aspect ratio.

I’m probably going to add options to add a mobile image as well in the future.

For now, you’ll have to use some custom CSS.

In Sections, you’ll see a “Custom Classes” field – in there, add a class like: custom-mobile-bg

Then you can do something like this:

@media (max-width: 768px) {
      .custom-mobile-bg {
            background-image: url('URL TO MOBILE IMAGE');
      }
}

That should do it 🙂

[David]

Hi Tom

where abouts do i add this code?

@media (max-width: 768px) {
.custom-mobile-bg {
background-image: url(‘http://opclinic.users40.interdns.co.uk/wp-content/uploads/2015/07/treatment1.png’);
}
}

If is style.css, under which section? (i’ve tried but the image doesn’t display)

[Tom]

This should help: http://generatepress.com/knowledgebase/adding-css/

Let me know 🙂

[David]

Hi, had a look at that earlier.

Ran into a problem on the 1st “upload it through “Appearance > Themes > Upload” – then activate it.” -couldn’t see an ‘upload’ option/button/link ??

Tried the 3rd option but not compatible with the current WP version.

I’m by far NOT an expert in CSS formatting. if i was to have a blank one would it look like this?

@media (max-width: 768px) {
.custom-mobile-bg {
background-image: url(‘http://opclinic.users40.interdns.co.uk/wp-content/uploads/2015/07/treatment1.png’);
}
}

Not sure if enough { } or to many? and url(‘http.. or url(http.. ??

It is rather frustrating.. 🙁

[Tom]

Sorry for the frustration! Realized I was missing a step in there – fixed it.

When you go to “Appearance > Themes”, you should see an “Add New” button near the top – click that.

Now you should see an “Upload” button in the same place.

CSS looks good – here it is cleaned up a bit:

@media (max-width: 768px) {
      .custom-mobile-bg {
            background-image: url('http://opclinic.users40.interdns.co.uk/wp-content/uploads/2015/07/treatment1.png');
      }
}

[David]

Nope, still not working – really no idea why neither 🙁

On the demo page http://opclinic.users40.interdns.co.uk/?page_id=52 i have two sections, section one has an background image and the custom class (custom-mobile-bg), section has no background but has the custom class (custom-mobile-bg)

If pasted some text into both sections just incase this was the issue, also used a different background image so i can see a difference on a mobile.

Could i ask you to take a look and see if you can see anything glaringly obvious? 🙂

[Tom]

Try this:

@media (max-width: 768px) {
      .custom-mobile-bg {
            background-image: url('http://opclinic.users40.interdns.co.uk/wp-content/uploads/2015/07/treatment1.png') !important;
      }
}

Also, you’ll only want to add the custom-mobile-bg class to the section where you want the mobile background image to show up.

[David]

YES – !important works 🙂

However, image is too big (height/width) and seems pixelated.

What size image you suggest? to look ok in portrait and landscape view?

[Tom]

Really depends on the size of the area/aspect ratio as you resize.

Might just take some playing around – I like to take a screenshot of the browser resized to the right width and then use Photoshop to place my photo over top – doing that should get you pretty close.

[David]

nothing is simple, eh!

What does @media (max-width: 768px) { do? If the screen size is above 768px then it displays the desktop version?

As for the size, is it only the width that is important? One image i used it seemed to repeat it, could i of changed some main settings via customizer?

[Tom]

Mobile development gets a little tricky 🙂

@media (max-width: 768px) check to see if the viewport (what you can see) is 768px wide or below. This is generally how we check to see if we’re using a mobile device.

Portrait tablets start at 768px and mobile phones start at 767px.

The width is the most important – it shouldn’t repeat it at all as the background is set to cover. When I tried the !important thing I thought it repeated as well, but it ended up being because you had the mobile-bg class set on the section below it as well.

[Beau]

Hi Tom,

First off – great theme! It’s exactly what I’ve been looking for.

I’m having the exact same problem on my end with this site’s homepage. I’m just trying to get the image of the lighthouse to center itself in mobile views under 768px. I replicated David’s settings and code (even down to using his background image), and still I cannot figure out what the issue is. I’ve got the child theme added in with a bunch of other custom styles.

Please help!

Thanks,
Beau

[Beau]

Forget to add the website!

http://www.finestkindcruises.com/

[Beau]

Actually, I got it by adding some CSS for the image’s margins:

@media (max-width: 768px) {
      .custom-mobile-bg {
            background-image: url('http://www.finestkindcruises.com/wp-content/uploads/banner-nubble-lighthouse1.jpg') !important;
            height: 200px;       
            margin-left: auto;      
            margin-right: auto;
     }

[Author]

Posts