NEWS ANCHOR BACKGROUND FULL
NEWS ANCHOR BACKGROUND SERIES

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

NEWS ANCHOR BACKGROUND FULL

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. 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?Ģ. Sorry for the long explanation, hopefully you get my drift! Here’s what I need help with:ġ. 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. On a smaller screen the images with the subject in the middle still look OK due to the way the background resizes. 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. 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. 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. 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. I’ve then added a featured headline, text box and button over the top of the background image using visual composer.

NEWS ANCHOR BACKGROUND SERIES

So far I’ve used a series of content bands, then added the images as backgrounds to these bands. 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. I’m using the Renew stack with the site set to full width (i.e not boxed).

News anchor background