Search code examples
htmlcssdrupaldrupal-7

Grayscale Change When Amending CSS

I am trying to change my background to grayscale, but not the title or description on top of it.

I am using Drupal as a CMS, and amending the CSS files in the directory. The theme is Color Glass. I did originally open this in Drupal Stack Exchange, but it was closed and I've been advised to open it in normal Stack Exchange.

This is the section of code in question:

.home-welcome {
background-image: url(images/css-header-header-amic-main-background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 650px;
font-family: roboto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

.home-welcome .main-title {
margin-top: 145px;
font-size: 10em;
font-family: roboto;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

.home-welcome .main-desc {
margin-top: 5px;
font-size: 1.5em;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

The weird thing is, that if I do the background-image colour, and the description and title in grayscale, that works. Just not the other way around.

I have also tried using filter: none, but that doesn't work either.

http://www.ubereadoolische.com/drupal3/

If I could change my html then I could follow the instructions on http://codepen.io/aniketpant/pen/DsEve - but it has to be a CSS amendment, as I can only change the CSS in Drupal (the code is written in PHP which I do not understand). There is no way for me to amend the HTML.

Can anyone help?

Thanks James

ps Please ignore my utterly incomplete site.

Solution

  • I think you can make it work with your current HTML structure. There is already a div present in your structure (.bkg-overlay), which you can use for your background image. I tested the following successfully in Chrome:

    .home-welcome {
  font-family: roboto;
  min-height: 650px;
  position: relative;
}

.bkg-overlay {
  background-image: url(images/css-header-header-amic-main-background.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 650px;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  position: absolute;
  width: 100%;
  z-index: -1;
}

    As you can see, most of your CSS code which was originally applied to .home-welcome is now applied to .bkg-overlay. The .home-welcome div is, position-wise, now the reference for its children divs (position: relative), so the .bkg-overlay can be placed on top of it by applying position: absolute. Last, the .bkg-overlay div is told to appear below every other div by setting a negative z-index: z-index: -1.