Responsive background-image creates extra space

1 Views

I have a Responsive Header I have created that half works.

In Google Chrome it adds extra spacing when the window is shrunk and in FireFox is doesn’t allow grayscale effects. I would like to remove that spacing and allow grayscale hover.

Read More

enter image description here

This is the difference between the two.

URL is http://www.bradlyspicer.net 

  #header {
    min-height: 310px;
    margin: 0px;
    padding: 0px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
}

.home-header {
    min-height: 310px;
    background-image: url('http://hdwallpapercollection.com/wp-content/uploads/2013/08/roma-city-wallpaper.jpg');
    background-repeat: no-repeat;
    background-position: 0% -150;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         filter: grayscale(100%);
      -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.5s;
}
.home-header:hover {
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
         filter: grayscale(0%);

}
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Solution for spacing

    #header{
    background-position:initial;
}

    Reason : It’s because initially your background-position was set to 0% -150 so it was making space between it.

    Solution for grayscale in Firefox

    .home-header{
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(100%);
}

    Reason : It’s because now firefox grayscale their images using svg inside filter.

  2. You should center your background and add a filter for FF.

    #header{
  background-position: center center;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
}