Background Image Position

Hello,

We are using the Betheme for our website. For the subpages we have these image headers that are full-width background images with the "cover" setting. This is the way we want it, except that a lot of the faces in the photos are getting cut at the top. We don't want to make the image height any bigger than it is now. The problem lies with the Visual Composer uniquely generated vc_custom class. The unique vc_custom class has the css styling of "background-position: centered !important". We've tried creating a new custom class for the row and styling it with "background-position: top !important", which would make the images look better without cutting faces off, but the vc_custom class overrides it.

We've had problems before with the vc_custom class with unique generated numbers, and you can usually solve it by looking at all the options for the element in Visual Composer, but the row element has no option for this (at least that I can find). Right now I'm using a temporary solution by adding a 90px high space to the jpg images so that the faces don't get cut off. Again, we do want the Cover option for the background image, just with the background position set to the top.


Let me know if you need any more information.

Thanks

Comments

  • Hi,

    unfortunately VC works weird in some cases and often overwrite css with no reason. Instead of using VC in this case, we recommend to use header image instead. You can set header under "Featured option" which is available on the right side while editing page.
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.