Custom CSS: Hero banner

Hi Frank - can we update the image itself with custom CSS? We changed the size of the container, but the image we uploaded is stretched to fit it. We would prefer to re-upload the image with the correct aspect ratio from our own server. Is this possible? @anthony.hopkins 

Is there a way to overwrite the background image within the CSS?

When I inspect the image I see:
<div class="brand-hero qa-brand-hero custom-hero-banner" style="background-image: url(https://downloads.zemax.com/zemax-portal/cloud.jpg)">

In the custom CSS I put:
.brand-hero .qa-brand-hero .custom-hero-banner  {
background-image: url(https://downloads.zemax.com/zemax-portal/cloud.jpg);
}  

But unfortunately this code didn’t overwrite the InSided background within the header.

Hiya! I can try to answer both of those.

@alexandra.culler I would recommend uploading the image again based on your preferences. However, its worth noting that CSS can't fix aspect ratio issues. 

@anthony.hopkins I'm afraid that's actually not what CSS is designed to do I'm afraid. You'll probably want to undo your changes and upload the images within Control and set them up as the hero banner. It will work out a lot better that way. 

Hi @Blastoise186 - thanks! My problem is that the InSided uploader does not allow us to re-upload with a taller image, even when we give the header more vertical space. We are always limited to the same HxW which results in the image looking stretched or blurrily-expanded when we change the size of the hero banner space. I will probably end up finding a different image . 

Ps: love that signature!

No worries @alexandra.culler ! Glad it helps. It’s sometimes a bit tricky because the banner also needs to show on mobile as well. I think you can sometimes get away with minor tweaks, but if you push things too far, it goes badly wrong.

I’m only a user both here and at my home base though, so I don’t have access to Control myself. There might be some kind of secret hack for this, but it’s not something I’ve come across.

I’m glad you like my signature too! There’s actually a joke behind that. If there’s one thing I’m known for… It’s basically smashing up pretty much everything I use to pieces with all the bugs I find. 

@anthony.hopkins As with all things CSS-related, proceed with caution, but here’s what I did to get a taller image:

I set the height of .custom-hero-banner to what I wanted (I chose 600px) then I used:

.brand-hero {

  background-size:1250px;

  background-position:center center;

  background-image: url("direct-link-to-your-image")!important;

  padding-bottom:150px;

  padding-top:120px

}

You’ll want to modify the settings in there to work with your image and how you want the search bar to appear, and check to see how it all looks on mobile, but that should at least get you started :)

Hi @nicksimard @Frank et al,

Do we need to create CSS to have a sub header in the 'Hero Banner'? 

Hey @timcavey I didn’t create it personally, but I do see that we had a subtitle added via Third-Party Scripts under the Customization menu. It’s currently hidden on our site, but it’s definitely possible to add one. 

Thanks @nicksimard yep one of our devs has assured me they can do it in 10 minutes. Let’s see, it’s being worked tomorrow 

@timcavey I recently did this so if you haven’t done so already this is a trick to do it:

To add the HTML in the right place: (Third party script before Body close)

<!-- Insert Tagline in header -->
<script> 
  var theHead = document.getElementsByClassName("qa-brand-hero-title");
  var newDiv = document.createElement("div");
  var input = document.createTextNode("YOUR TAGLINE GOES HERE");
  newDiv.appendChild(input);
  theHead[0].appendChild(newDiv).setAttribute('class', 'tagLine');
</script> 

To style the newly added tagline: (Custom CSS)

.tagLine {
  font-size:18px;
  color: red;
}

CSS newb here (do they still call people newbs?). We want to change the height of our banner, but when I’m playing with this on staging, nothing is changing. Is there a specific spot to place this code?: 

/* hero banner change height */ .custom-hero-banner { height: 360px; /* default: 240px */ } 

@Julesssss my understanding of this third-party scripts section is that it loads last. So any default banner styling should get overridden by your custom CSS. 

Are you sure the selector  .custom-hero-banner is specific enough? 

Out of interest would you want the same height and width dimensions for all screen sizes?