Docs

[Kerri S]

Hi,
I’m using Integrity 7 with demo content installed. I uploaded background images that met the 1500px wide spec but it’s going off the screen. My images are 1,500px × 573px

All of the assets are already created to this size. What can I do to make it work?

Help! Thank you!

url: happy2bblue.com

[Kerri S]

This reply has been marked as private.

[Kerri S]

I just found a piece of cose in the forum but it only seems to apply to the first slide:

.x-content-band.bg-image,
.x-section.bg-image {
-webkit-background-size: contain !important;
background-size: contain !important;
}

Any help to get this fixed up would be appreciated!
The goal is to have a series of these slides sit one on top of the other, like the demo, except ours are only 573px high.

Thanks again 🙂

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed post. It appears that you are referring to the background images in your sections. To fully understand how the background image works, please check out this topic: https://community.theme.co/forums/topic/section-background-image-2/#post-691126

Hope this helps. Please let us know how it goes.

[Kerri S]

Update:
I’ve been experimenting. If I insert the images as “Images” and not “Background Image” then they fit and resize appropriately. I really would prefer to have the parallax effect remain on the blue background illustrations. I’ve left it up so you can see the difference and what’s happening.

If I must use them as flat images vs. parallax could you please tell me how to remove the padding that’s showing though at the bottom of each image?

Thanks – looking forward to hearing from you. I hope you had a good weekend 🙂

[Kerri S]

I just saw your post after I wrote the one above. Thanks for the info. It’s nearly midnight here so I’m going to log off and look at this again in the morning. Thanks

[Rupok]

Hi there,

I can see you are using image rather background image. If you are following that thread to previous replies, make sure to ad the image as background image. Let us know if you need any other help.

Thanks!

[Kerri S]

Hi,
Thank you for the article. I do understand the stretch but if I create it so it meets the minimum size shouldn’t it fit properly? I’ve attached images that show what I’m looking at.

I was experimenting last night changing them from background to images just to see if I could get anything to work. Ideally I’d like the full solid blue panels to be background images and have the white testimonials go over it.

Would custom CSS adjusting the container size help?

[Kerri S]

This reply has been marked as private.

[Joao]

Hi There,

Tell your husband to export the images with 1600px otherwise they will look blurry and that is not good, specially in a situation like this.

Once he does that you can try to re-upload them.

Let us know how it goes,

Joao

[Kerri S]

i just realized I didn’t get to attach the photos.

1. I changed image “Happy to have options” background image to 1600. It still doesn’t work across different screens. I’m not super concerned about image quality at this point, I just need it to work on common browsers. Once it’s settles I can go back and improve the images. I just want them to stick and not being running off the page.

2. I followed the advice of the initial post and created a blue background image and then added the elements and set to Parallax but it doesn’t “stick” as parallax like the other ones that are background images with no copy or images. You can see those towards the bottom of the site.

3. The images have a stripe of bg color along the bottom. I don’t have any margin or padding.

[Joao]

Hi There,

You can add the following code on the StyleBox of each section where you placed the images as a background:

width: 100%; margin-bottom: 0px;

I have done it for you to save for the hassle but the code is here in case you need it somewhere else.

Hope it helps

Joao

[Kerri S]

Thanks – that’s great! I was working in cornerstone and saw the code and then came over here and checked it 🙂

Why doesn’t the parallax work on my site? Any thoughts on question 1 or 2?

[Friech]

Hi There,

I’m drifting off with the topic a little, so I’ll answer your questions above by quoting it.

If I must use them as flat images vs. parallax could you please tell me how to remove the padding that’s showing though at the bottom of each image?

If there is something on the image that you need to emphasise or the image itself as a whole. Add it as an Image content (flat images), not a background. Add a class man and pan to your image element to remove all of its space around it.

Let us know if there are space remains and we will inspect it to see where its coming from.

if I create it so it meets the minimum size shouldn’t it fit properly?

Yes, if you add it as an Image content. But no if you add this images as a background. You can have your image minimum size same as your monitor resolution. However, there is no optimal size for a background-image because your page/site will be viewed on screens with different sizes/resolution.

1. I changed image “Happy to have options” background image to 1600. It still doesn’t work across different screens. I’m not super concerned about image quality at this point, I just need it to work on common browsers. Once it’s settles I can go back and improve the images. I just want them to stick and not being running off the page.

They are being cut-off on some screen/browser width, because BG-image tend to cover the whole container, while keeping its ratio. Please follow this another post and this on how a background image works.

2. I followed the advice of the initial post and created a blue background image and then added the elements and set to Parallax but it doesn’t “stick” as parallax like the other ones that are background images with no copy or images. You can see those towards the bottom of the site.

Parallax effect only works on Background-image, it does not work on Image content. Yup, parallax effect is not noticeable on those plain color backgrounds.

So its either, you will have the Image as a content and responsive (not cutting-off) but won’t have a parallax effect. Or Set the image as a background-image and have the parallax effect, but forcefully fit the BG-image with CSS and it will be squeeze and stretch.

Hope this shed some lights.

Thanks.

[Author]

Posts