[leannevenierParticipant]

Hello, I’d like to know how to make a full width static (with parallax) hero image with text on in that does not get cropped on mobile devices. See this page to see what I mean:

http://catalyticcolor.com/how-to-be-happier-healthier-more-creative-and-500-percent-more-productive/

I currently have a 1200×500 px (or something like that) optimized-for-web image as my home page, hero banner image, but on mobile, the entire thing gets cropped so you only see a very thin slice of the image from the middle, with the text blown up full screen.

I want the image to remain fully in view with the text proportionally smaller on whatever device you’re viewing it on. (ie I don’t want it to get cropped with the image a thin slice of the original and the text taking up the full screen).

I know this can be done in Revolution Slider, but that program is way more robust than I need and I’ve spent a huge amount of time just trying to create a simple hero image with text — with no luck (fonts are impossible to add – still haven’t figured that one out, editing the layout is equally challenging, and all sorts of other issues).

SEveral developers have told me that the Divi theme has a really nice, easy to use hero image for the home page that stays as a static full width image just like the RS complexities can do. Are you planning to offer something simpler like that in the future?

For now, Can you provide me with the CSS code to make the regular old image that I have now, stay as a static full width image at the top of the home page?

Thanks for your help!

[FriechModerator]

Hi There,

Thanks for writing in! If we try to force the landscape background image to fit into a portrait oriented screen, it would make the background squeeze and stretch just to fit on the container.

You can add this under Custom > CSS in the Customizer to see what I’m saying.

.page-id-1378 #x-section-1 {
	background-size: 100% 100%;
}

We could also set the background as background-size: contain; with that the whole background-image is visible and responsive, but it would not able to cover the whole Section.

We can also switch background image depends on the screen size with @media query CSS, but that would require an different orientation of images with different sizes.

Or you can utilize the Revolution Slider

Let us know how do you want to proceed, Cheers!

[leannevenierParticipant]

Ok, thanks for your feedback!

Apparently I’m not the only one with issues in Revolution Slider where the addition of google fonts was pretty nebulous and challenging. RS just came out with a new update and one of the fixes cited is specifically designed to improve the Google fonts addition interface. 🙂

In the meantime, until I have time to go play around with the new (hopefully dramatically improved) Revolution Slider program, I found that by simply turning off the Parallax feature, the static hero image (ie. my header banner which is not currently using Revolution Slider) gets less severely truncated/cropped on all devices including mobile so it looks a lot better on mobile now. 🙂

[JadeModerator]

Thanks for sharing and glad you’re able to find a workaround. Cheers! 🙂

[Author]

Posts