Large images on the homepage

Hi,

I have added an image to the homepage under the navbar, although I can’t seem to get the whole image to fit?

Can you advise?

Hello @envirogroup,

Thanks for writing in!

Please inspect the Section that’s holding background image and under Customize > Setup > Class add a class name. After that add following CSS under X > Theme Options > CSS:

.add-class-name{
background-position: 50% 12%;
}

That being said I noticed that website is using X Theme 6.5.6 and Cornerstone 4.0.0 which may cause compatibility issues as you have old version of X Theme on the website. Please update X Theme to version 7.0.4 and Cornerstone to version 4.0.4 to avoid any compatibility issues.

You can refer following resources to update X Theme and Cornerstone:

https://theme.co/changelog/

Thanks.

Hi Prasant,

I have added the above it is still not working?

Thank you
Conor

Hey Conor,

We’re very sorry. Prasant’s suggestion is incorrect so I have removed them. Specifically, it will not display all parts of your image and it will not work because the Section’s Parallax option is enabled.

If your goal is to show all parts of the image, you need to use the Image element. You can read the details about the Image Element here: https://theme.co/apex/forum/t/elements-image/10229.

Since your image’s width is more than 1920px, it will cover a full HD screen while displaying the whole image out of the box. If you need to support a larger monitor, you will need to use an image that is the same size or higher than the monitor’s resolution in terms of width.

Please just note that your image’s aspect ratio is a very tall portrait. That would need a lot of scrolling to view. I’d recommend you try this first so you experience the effect of the setup. Please keep that in mind.

If you don’t want that long scroll behavior and want to continue using the Section Background option then you will need to accept that some parts of your image will be cut-off.

If you accept and wish to show the upper part of the portrait, what you can do is set up a new section. Delete the current section containing the image and follow the setup below:

  • Add a new section
  • Enable Advanced Background of the section and select your image
  • Set up the Background Position.

For more Background Position values you can use, please read this tutorial https://www.w3schools.com/cssref/pr_background-position.asp

If you need assistance with that setup, let us know if you want the full image to display or only the portion and we’ll set up an example in your site.

By the way, the options available in the new Section now might be overwhelming at first but once you get familiar with them, they will enable you to achieve more.

Hope that helps.

Thank you.

I can’t seem to have “Size and Position” on my control panel?

Thanks
Conor

Hello Conor,

Thanks for updating the thread.

I am sorry for the confusion on my part in my reply.

It seems that the advanced control option is turned off. To turn it back on please navigate under X > Settings > Permissions > User Preference > Advanced Mode and select Always On.

To learn more you can take a look at following article:

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.