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