How to make Front Page Image resize automatically for different resolutions

[realityshifter]

Hi,

I'm using the Kreativ Pro child theme. How do I get the Front Page Image display to resize automatically as the browser window is resized or when people view the site on mobile devices with smaller widths? Right now, the full image is visible at some resolutions but various parts of the image get cut off in the display at other resolutions (instead of the image display automatically resizing to accommodate the different widths).

My site is http://kristencramer.com

I've already tried reaching out to Themesquare, the theme creators, but they typically don't respond to support requests even though the purchase of the theme was supposed to come with a year of support.

Thanks in advance for any help!

http://kristencramer.com

[andytc]

My first thought is it’s using CSS background ‘:cover’ for the images , this displays the image as a background, not an inline image. At lower resolutions the amount or focus of the image will change and you will see less of the image. As a guide, you’d normally try and choose images with the main focus of the image being centre: centre.
I’ll check later as I have Kreativ pro.

[andytc]

I can see you've added the css below into your Custom Css -

.front-page-1 {
 background-position: center !important;
}

The css you added is over-ruling the inline parallax effect CSS added by the JS found at line 11 front-page.js in the child theme. This JS dynamically adds the slight parallax effect on scrolling for that image only on the front page. No great loss perhaps.

starting at line 11 front-page.js

/* Parallax Effects
	--------------------------------------------- */
	function kreativ_parallax_effects() {
		//* Parallax effects on front page sections
		$(window).scroll(function(){
			var scrolltop = $(window).scrollTop();
			//* Front page section 1 parallax effect
			$(".front-page-1").css("backgroundPosition", "50% " + -(scrolltop/6) + "px");
		});
	}

	//* Init parallax effects
	kreativ_parallax_effects();

Trying adding this extra line into your custom css as below and see if the image display's in a more appealing way for you -

.front-page-1 {
    background-position: center !important;
    background-size: cover;
}

[realityshifter]

Thank you so much! Your recommended solution did exactly what I was looking for.

I actually added the "background-position: center !important;" code to the custom CSS earlier today after hearing back from someone at Themesquare about how to solve the problem. But, as you pointed out, the solution they proposed doesn't really solve the problem. It just causes the center part of the image to stay visible as the width of the display gets smaller, rather than the entire image resizing automatically to fit within the area and the whole image staying visible at any width. Your solution fixed it and now the image resizes itself in exactly the way I was hoping it would.

Thanks again! I appreciate your help!

[andytc]

No problem, glad it’s all looking lovely 🙂

[Author]

Posts