Background Lower Layer Size and Position

Support
#1

Having trouble getting images to fit properly on smaller screen displays when I put the image in as a background lower layer.

You know how there are (5) screen sizes that can be turned on/off under the ‘hide during breakpoints’. I created the background image to work well on the 2 largest screen sizes. Then I create a separate section for the 3 smaller screen sizes when it comes to these background images I am using.

I am having all sorts of problems trying to figure out how to fit an image in as the background lower layer so that it doesn’t overlap (or have a gap) with the section just above it or the section just below it and will fit properly on a phone in portrait and landscape as well as a tablet in portrait.

Also, on some of these background images, I would like to adjust the part of the photo that is being displayed on smaller screen displays. I would like to be more accurate than using ‘center right’ or ‘bottom left’ for example.

I tried using this description that Kory wrote in an answer to someones question back in October 2017 (here is the link to that):

but the different things I tried just didn’t solve my problems, so I am certainly doing something wrong.

I was hoping you could help point me in the right direction, so the images will display correctly on the smaller screens.

ALSO: Can you also give me the breakpoint numbers for each of the 5 screen sizes so I can keep them for future reference?

Thank You for your help.

#2

Hi There,

If you want to have a image that scales and shows 100% all every screen I reccomend you using Image or Classic Image Elements Instead.

Background images will be cropped, you could creat 5 different sections and hide it in different screens, but sincerely I dont think so that would be considered the best common pratice when building websites, it could be done from time to time in situations where you exclusively need certain effect, but I would suggest you not to turn in a common pratice.

Here is a image size guide which can be useful.

https://xthemetips.com/size-matters-the-x-image-guide/730/

Here are the theme breakpoints

// Responsive Breakpoints
// =============================================================================

Small:          480px  !default;
Medium:         767px  !default;
MediumLarge:    979px  !default; // (+1 = default desktop)
Large:          1200px !default;

Please provide your URL and point the specific section you are facing issues in order that we can help.

Thanks!

#3

Thank you for the response.

The site isn’t live yet but you will see my login info up above in a secure note for you now.

Currently I am working on the SERVICES page and down at the bottom of the page, I tested putting an image in using ‘Image’ instead of a background layer (which will be displayed on smaller screen sizes). The problem I am having right now is getting the height of the image to sit properly on the page. The width seems to look correct when I view on a phone (portrait or landscape) and tablet (portrait). The problem with the height of the image is it either has a gap with the section above or below it OR it starts to overlap the section above or below it. There is probably an easy fix to that but I am just not sure what it is, so the image fits in nicely with the sections above and below for any screen size.

Thank you for your help on this.

#4

I forgot to give you the URL if you wanted to look at the SERVICES section I am working on. It is:

LittleGreenFrogProductions.com

#5

Hi Again

You were right, I should not have been using the background image for the smaller screen. I used background image on the PC/laptop screens because I have text on semi transparent background which sits on top of the image on the left side of the screen. This wasn’t displaying nicely on smaller screens, so that is why I am creating separate sections for smaller screens with these images.

When I use the image element and put the picture in, the picture fills the screen properly in width size but it isn’t fitting properly when it comes to height. To better describe the problem, imagine the image is a jigsaw piece and instead of falling properly into the puzzle and fitting to the pieces around it, it is sort of floating above the puzzle and overlapping other pieces above or below it.

Currently I have a test image that I have been working on at the bottom of the SERVICES page and as you can see in a phone (portrait and landscape) and a tablet (in portrait),the image looks fine in the width and is responsive but I am not doing something right when it comes to the height of the image now. You can see it either has a gap showing in relation to the section above or below it OR it is overlapping the section.

Appreciate your help.

#6

Hi There,

Are you referring to this section?


It’s kind of hard positioning elements in the section with lots of negative margins involved. Please set all the margins and paddings in this section/row/column and on the image element to 0.

You can make the image element take the full section by turning off the Column Container option and adding a width:100%; on the image inline-css.

And please provide us a screenshot of what you’re trying to do.

Thank you,

#7

Yes you are correct, that was the test section I was working on at the bottom of the SERVICES page.

I took your advice and put all the margins and paddings to 0 and I also turned off Column Container. This cleaned it up and the image did fall into place properly, which is great.

I did not put the ‘width:100%’ on the image inline-css because I have to admit, I am not sure exactly where you want me to put that. Can you please give me a little more instruction and I will try it.

Now that the images are falling into place and not overlapping or leaving a gap above or below, I was wondering if there is a way to increase the size they take up on the screen display (meaning the images have more height on the screen)? Is it possible they can be enlarged (it is okay if the sides of the images are cropped off a little)? What I am wondering, is there is a feature similar to when an image is put in as a background layer and you can work with the Size and Position (making the image larger and positioning it to what part of the image you want displayed)?

What I am finding is the photos are looking a little small on the phone in portrait since the entire image is being displayed. They look good on the phone in landscape and also on the tablet in portrait. Maybe I have to live with the images looking small on the phone in portrait but if there is a way I can make them bigger (ie: with greater height), please let me know and I will give it a try and see how it works.

Glad this is heading in the right direction. Really appreciate the help.

#8

You can’t position the image using the Image elements. If you use the background, you can setup one size and position either so the solution to this is custom CSS. But, that is outside the scope of our support. You really need to find a sweet spot where your image looks nice both on desktop and small screens. Otherwise, you need to setup several sections and use the Hide During Breakpoints feature.

Thank you.

#9

I turned off Column Container but to follow the above instructions from Friech, can you tell me where exactly to type this:

“adding a width:100%; on the image inline-css”

.Not sure where to put the: width:100%;

Thanks

#10

Hi There,

Sorry for the confusion, what I mean is 100% width.


But you should not worry about that since your image is large enough to cover all screen sizes.

Thanks,

#11

Thanks a lot Friech

Really appreciate the help and the screen shots to make things easier to understand.

I am now using a mixture of background images for some of the photos on that page and some as an Image element. Seems to be working out I am finding that some photos respond better with one type of element, while other photos look better with the other element.

I’ll keep working on it and reach out to you if I run into a problem.

Thanks So Much!!!

#12

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.