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.