0

I have a row using WP Bakery (Visual Composer formerly) which has two columns that are just background images. There is no content. However, when I set the row for Full Height in the Front end editor from WordPress, the row still doesn't stretch vertically to accommodate the full image height. It shows maybe 1/4 of the image at the top and then the rest is cut off. 

<div style="position: relative; left: -45px; box-sizing: border-box; width: 
1256px;" data-vc-full-width="true" data-vc-full-width-init="true" data-vc-
stretch-content="true" class="normal_height vc_row wpb_row vc_row-fluid 
vc_row-o-full-height vc_row-o-columns-stretch vc_row-o-equal-height vc_row-
flex">
   <div class="wpb_column vc_column_container vc_col-sm-6 vc_col-has-fill">
       <div class="vc_column-inner vc_custom_1517014250070">
          <div class="wpb_wrapper">
          </div>
       </div>
   </div>
   <div class="wpb_column vc_column_container vc_col-sm-6 vc_col-has-fill">
       <div class="vc_column-inner vc_custom_1517014312168">
           <div class="wpb_wrapper"></div>
       </div>
   </div>
</div>

 CSS for left image:
.vc_custom_1517014250070 {
   background-image: url(/uploads/2018/01/hbar-chart.jpg?id=2944) 
    !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
}

CSS for right image:
.vc_custom_1517014312168 {
    background-image: url(/uploads/2018/01/f-mix.jpg?id=2943) !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
}
Tass Times
  • 157
  • 4
  • 15
  • Could you post the relevant code here? It would help us figure out the issue quicker. – pavger Jan 27 '18 at 00:13
  • There really isn't code per se. This is all being done with the WP Bakery front-end editor. But if there's something else that would help, let me know. Thx. – Tass Times Jan 27 '18 at 00:29
  • If you inspect the two columns with the web inspector in a browser, you can see the relevant html and css. Just post that here either in a snippet or a code sample block. – pavger Jan 27 '18 at 00:31
  • Just added HTML and CSS above. – Tass Times Jan 28 '18 at 01:42

2 Answers2

0

Don't use a background image, but insert an image with full width.

A page element will never adjust its size to a to a background image, it's only possible (not the rule) the other way round. So just use an img element with your image

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Do you mean in the Bakery Front-end editor? This is how I built the page using the Bakery's Front-end tools. As in, using their tools I created a Row, then selected a two-column layout, and in each column I using the Design Elements to select an image. Do I need to do this differently to add an `img` element? – Tass Times Jan 28 '18 at 01:51
0

You can use raw html widget into the column with background image.

Firstly, choose background style as "cover" than

<h2><br><br><br><br></h2> <!--how many space as you need to visualize background image-->

Than it will be cover the height of the row

Stst
  • 11
  • 2