[btboganParticipant]

Hello,

Is there a way to pick witch side of the background image shows in mobile instead of it just showing the center of the background image? I would like for it to show the right side. Is there a percentage I can scoot it over or something? How would I do that?

thanks, God bless!

[RadModerator]

Hi there,

Thanks for writing in.

Would you mind providing your site’s URL that has this background?

It can be controlled by background-position. http://www.w3schools.com/cssref/pr_background-position.asp

Though, I’m not really sure how to apply it unless I could see how your background image is setup.

Thanks!

[btboganParticipant]

sure

http://www.barrettbogan.com

[btboganParticipant]

on the desktop it’s great, but i would like to be able to decide where to position the background images when it comes to tablet and mobile since it only shows the center of the image on those devices.

[Rue NelModerator]

Hello There,

Thanks for getting back to us. To be able to decide where to position the background images when it comes to tablet and mobile, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

/* tablet */
@media(max-width: 979px){
  #x-section-1 {
     background-position: top left; 
     /* top left, top right, top center */
  }
}

/* phone */
@media(max-width: 480px){
  #x-section-1 {
     background-position: top left; 
     /* top left, top right, top center */
  }
}

Please make sure that you have the correct section ID.

Hope this helps.

[btboganParticipant]

it did not seem to do anything

[RupokMember]

Hi there,

Thanks for writing back. I don’t see the code on your site and also the section is hidden for mobile. So you can try updating the code for section 2 :

/* tablet */
@media(max-width: 979px){
  #x-section-2 {
     background-position: top left; 
     /* top left, top right, top center */
  }
}

Use this if you only want to set different background position for mobile devices, otherwise the above code is fine for mobile as well.

/* phone */
@media(max-width: 480px){
  #x-section-2 {
     background-position: top left; 
     /* top left, top right, top center */
  }
}

Make sure your other code is closed properly if that doesn’t take effect.

Thanks!

[btboganParticipant]

that tricky hidden mobile section haha, thank you for being so helpful.

ok yes that is great. I would like to be able to choose more than just all the way right though. Like somewhere in the middle that is not center or right you know. Is there a percentage I can use or something for this?

[RupokMember]

Hi there,

Thanks for writing back. Yes you can use your own positioning with percentage as well like :

#x-section-2 {
   background-position: 30% 20%; 
}

or

#x-section-2 {
   background-position: 30px 20px; 
}

You need to figure out which one fits you best.

Thanks!

[btboganParticipant]

oh awesome perfect, thank you so much

[NicoModerator]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts