Backgroundpicture

Support
#1

Hi. I am working on this page: https://www.copilates.se/om-oss/
The site looks as we want it on a computer and on my ipad but on a mobile phone we cannt really create the effects we want.
I have created separate elements that are only visible on a phone.
I have found that if I Use a background picture with parallax effect the background picture gets distorted if I place text elements on it (the background picture becomes larger which then doesnt work on a phone).
Is there any way to work with background pictures, place text above them and still have the desired parallax effect on all devices?
If you look at this page on a cell phone the first picture only has the headline. I would like to place the text that is below above the picture (in the same way as I have done for desktop and ipad).

Tomas

#2

Hello @TomasJarvling,

Thanks for writing in!

If you insert a background image into a section and enable parallax, the parallax effect will only be applied in desktop screens. On mobile, it may not look and work as you expected. First, I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

And then, you maybe interested in this article:

“If you look at this page on a cell phone the first picture only has the headline. I would like to place the text that is below above the picture (in the same way as I have done for desktop and ipad).”

Be advised that once you set the image as a background image of the section, it will stay as a background image. Any content you add inside the column will still display the background image of the section. You cannot collapsed and reposition the the image or the headline in mobile.

Hope this makes sense.

#3

Thanks for the reply. Ok, perhaps parallax is not a good option for my purpose in this case. I will try a new approach.
On this page: https://www.copilates.se/om-oss/ how can i see what font that is used for the headline and bodytext?

#4

Hey @TomasJarvling,

If you’re viewing the live page, you can use the browser’s element inspector and look for the font-family property.

image
image1181×330 43.1 KB

In Theme Options, check the font used in Theme Options > Typography

image

If the font in the Theme Options doesn’t apply to the text on the page, a text element is probably in use in which case, you need to inspect the element’s Text options.

Hope that helps.

#5

One more question.
On this page: www.copilates.se/om-oss there is a picture with the text ”Gästlärare” which has a parallax effect. If I place a text element on this page the picture becomes distorted/larger. Why is that?

#6

Hi @TomasJarvling,

That is the behavior of a background-image with a background-size set to cover. When you add text or any element on the Section it adds up to its overall height, and so the background-image is expanded (proportionally) to cover the entire section.

More details about background-size

Cheers!

#7

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