Docs

[isdg01]

HI,

I am working on a site based on the Integrity 4 demo. I have seen several posts regarding my same issue, but none of the previous responses are working for me.

On the homepage, the images are loaded via Background Images. The demo file said to make images 1500 x 1000 px. When I use this size, my images are not scaling properly. Instead of showing the full image, a portion of the image is hidden behind the nav bar on the right side.

I have tried a variety of image sizes but all of them are scaling oddly. How do I get my full image to display without getting cutoff?

Thanks,
Dawn

[isdg01]

This reply has been marked as private.

[Rue Nel]

Hello Dawn,

Thanks for writing in and the very detailed information. To fully understand how background images works, please check out this topic: https://community.theme.co/forums/topic/section-background-image-2/#post-691126

And If just simply want to create a fullscreen gallery slider, I would recommend that you install Slider Revolution from X Addons > Extensions and use this plugin to create your slider. You might want to check out this video tutorial;

Hope this helps.

[isdg01]

Sorry, but this is not helpful at all. Integrity 4 Demo uses the WordPress Background Image section to place images on the homepage. Revolution Slider does not work in this area. I am not trying to put a background image in a container. It goes behind the container. From within Cornerstone, this is not do-able (at least from what I have found so far).

I just want my background images to size properly using the Background Image section as shown on the demo. Right now they are going behind the right hand navigation and cutting off half of my image, no matter what size image I use.

Is there a CSS fix to help resolve the issue of the images displaying behind the nav bar and getting cut off?

[Rupok]

Hi there,

Sorry for the confusion. Demo images are around 1374 × 1031 and 1356 × 1044. So you can try something near that.

You an also try adding this under Custom > CSS in the Customizer.

.backstretch > img {
  height: auto !important;
  width: calc(100% - 300px) !important;
}

Make sure your image is long enough to avoid space in bottom.

Cheers!

[isdg01]

That’s not working either… at least for the responsive part of it. The images look like I want on my 27″ monitor, but not on mobile or iPad. I made all images 1356×1044 since that was the taller of the dimensions you mentioned.

On mobile, in portrait, the images do not show at all. In landscape, they are shoved to the upper left corner behind the nav/masthead, with only a small portion of the left and bottom of the image showing.

On my iPad, I have a huge white space at the bottom, as you mentioned in your note.

Why is this so problematic to reproduce the demo? This is the first time I’ve had this much difficultly with one of your demos…

[isdg01]

Can you please send revised CSS code that takes responsive into consideration?

Thanks,
Dawn

[Friech]

Hi Dawn,

Please update the code to:

@media (min-width:  980px) {
	.backstretch > img {
	  height: auto !important;
	  width: calc(100% - 300px) !important;
	}
}

So it would not affect the mobile view.

Thanks.

[isdg01]

OK, we’re almost there…
The new code has the display on my Android phone looking correct. Thank you.
On my iPad in landscape view, the homepage images are still cutting off. Please see attached screenshot.
What can we tweak to make this display properly?

Thanks,
Dawn

[isdg01]

Here’s a smaller version of that screenshot…

[Rupok]

Hi there,

Thanks for updating. The above code is for desktop only and never should affect mobile view. However we can have a look for the iPad view as well.Unfortunately it’s not possible to diagnose the issue while multiple images are active. Would you keep a single image for now?

Cheers!

[isdg01]

Here you go. single image screenshot. If you mean only one image in the background field, feel free to remove some and I can add them back in when you are done.

[Friech]

Hi There,

Yes, the code I’ve provided above does not affect the iPad landscape. Because iPad landscape has a width of 1024px.

Please update the given code to this:

@media (min-width:  1024px) {
	.backstretch > img {
	  height: auto !important;
	  width: calc(100% - 300px) !important;
	}
}

Hope it helps, Cheers!

[isdg01]

I have cleared my cache, but this piece of code doesn’t seem to change the layout on the iPad. I am still seeing the background images cutoff as shown in my previous screenshot. Actually, it’s cutting off at 580px. Previously it was cutting off at 595px, so it’s made it a little worse…

[Rue Nel]

Hello There,

Thanks for the updates! Could please update the code and make use of this instead:

@media(max-width: 480px) and (min-width:  1024px) {
	.backstretch > img {
	  height: auto !important;
	  width: calc(100% - 300px) !important;
	}
}

We would loved to know if this has work for you. Thank you.

[Author]

Posts