[leebranchParticipant]

I’m using the Renew stack with the site set to full width (i.e not boxed).

I’m trying to create a homepage that has a series of full width images stacked one on top of the other, with text and a button overlaid on each image.

So far I’ve used a series of content bands, then added the images as backgrounds to these bands. I’ve then added a featured headline, text box and button over the top of the background image using visual composer.

[I’ll add a link to the site in a private message below so you can see what I mean!]

I’m using images sized around 1440 x 900 pixels, then controlling how much of the background shows behind the visual composer elements by adding gaps into the content band, and adding margins to the elements.

This method works pretty well to get a good effect on a full size/laptop screen, however I’m having a lot of problems making it work on smaller screen sizes.

It seems that as the screen size gets smaller, the size of the background images also reduce and specifically are cropped from the edges inwards.

The images I’m using are all high production value photos with human subjects, and the position of the subjects/people are either on the left, the right, or in the middle of the background image.

On a smaller screen the images with the subject in the middle still look OK due to the way the background resizes. However, where the subject or focal point of the background image is positioned on the left or the right, they get cropped out on smaller devices.

Sorry for the long explanation, hopefully you get my drift! Here’s what I need help with:

1. Is it possible to set some kind of anchor on a background image (targeting specific content bands) so that when the background resizes on smaller screens it retains/crops from either the left or right of the image, rather than the centre?

2. Is there a better way of doing what I’m trying to achieve? I just want to use full width images on a page, overlaying text and a button, in a way that preserves the image better (rather than arbitrarily crops) on smaller screens.

Hope you can help. Have spent about 5 hours fiddling with this now but just can’t get a good end result 🙁

Sincere thanks,
Lee

[leebranchParticipant]

This reply has been marked as private.

[leebranchParticipant]

Me again…

I’ve done a rough test to see if I can achieve this end result by placing edited images more suited to each screen size within visibility elements.

However, the visibility element only gives options for 3 sizes – phone, tablet and desktop – but it seems that there are more than 3 breakpoints? The image I added to a mobile-only view works great on my phone in landscape, but there is a white border to the right of it when I turn my phone to landscape…

I then tried to add a content band inside a visibility element, then add a different proportion background image to the content band. This approach would mean having 3 versions of each image optimised for the 3 screen sizes, set within visibility elements so the right one shows for each screen size.

I’m thinking using the images as backgrounds to content elements in this way would give a little more flexibility of sizing and fix the white space seen on my mobile in landscape mode when using an image element.

Could you let me know if I’m getting closer to the best way of doing it please (!?) and if so, let me know either:

– How to add more sizes to the visibility presets
– What size images I should create for a) desktop, b) tablet and c) mobile visibility settings?

Thanks,
Lee

[ChristopherModerator]

Hi there Lee,

Let me suggest a css code that you can add into style option of each content band to force a background image to cut from left or right.

This code cuts image from left:

background-position: 100% 0;

This one cuts from right:

background-position: 0 0 ;

Just add code above to style option of content band and it will do the trick 🙂

Hope it helps.

[leebranchParticipant]

Haha! You must have laughed when you read my long essays when such a short line of styling fixed my problem completely!

Your support is absolutely fantastic. Sincere thanks 🙂

[RubinKeymaster]

You’re welcome!

[lgirardParticipant]

Hi! I tried the same for my client’s blog. It works for tablet, but when it gets to small as the iPhone, the image is cropped from the left (which is ok cause it’s just white) but ALSO from the right… When It was a revolution slider I found out how to make it responsive, but now that it’s just a flat content band with a background image, it doesn’t work.

http://www.benoit-savard.ca/

Please help 😉

[Nabeel AModerator]

Hi there,

Please add the following CSS code via Appearance > Customize > Custom > CSS:

@media screen and (max-width: 790px){
#x-content-band-1 {
background-size: 191% 100% !important;
}
}

Let us know how this goes!

[lysagreerParticipant]

Hello Support,

What can be added to the Style CSS on the content band setting to have the background image anchor from the center of the image and NOT zoom in? Even when I try loading a cropped photo to force the center look, it zooms in…thoughts?

[RubinKeymaster]

Hey There,

Due to the responsive nature the content band always has to zoom in a bit to fill the whole content band. When you reduce the width of your site or increase it the image always will fill up the whole space of the content band by changing this to the centered option you would have the problem that the image won’t fill up the whole container which is something we do not recommend since your site would look broken/not polished to your customers.

[isaac.trevinoParticipant]

Is there a way to cut from the top?

Also, is there a way to set a specific focal point on an image? So that part of the image will be always be on the screen no matter what. I think right now it automatically sets the center of the image as the focal point.

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[isaac.trevinoParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please upload images to your host and then use them in your site, currently I don’t see images as they are located in localhost.

If you want to display specific part of image shortcodes and cut them from top, I should say it’s not possible, but if you are referring to background image then provide us with exact URL of a page.

Thanks.

[Author]

Posts