image backgrounds

Hey Ray

Would really appreciate some advice on the following although if you feel it requires a PT then just let me know.

Am putting together a site at the moment where I have a hero image that needs to by dynamic and changeable by the client.

At the moment, the image is set within the css.

<nav class="row heroLayer">

where the css is

body > .row.heroLayer {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 600px;
  max-width: none;
  max-height: 600px;
  background-color: transparent;
  background-image: url('images/misc/heroLarge.jpg');
  background-attachment: scroll;
  background-position: center top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  background-repeat: no-repeat;

  background-blend-mode: normal;
}

but to make it a dynamic image I then need to take that and make it

<nav class="row heroLayer" style="background:url(images/hero/<?php echo($PageContents->getColumnVal("PageMainHeroImage")); ?>);">

but by doing that I lose all the styling that is set and not too sure how I can retain it to maintain the functionality of the image as the breakpoints change.

Have attached the 2 versions of the same page together with the css and linked to those 2 live pages so you can see how they differ

Try:

<nav class="row heroLayer" style="background:url(images/hero/<?php echo($PageContents->getColumnVal("PageMainHeroImage")); ?>);background-size: cover;">