Search code examples
htmlcssbackground-image

CSS background problem with "fixed" and "brightness"

I have two questions for you and I will be happy to help me :)

Header of this site is with 2 background(BG) imgs side by side without any free space... BGs are huge images and my first question is:

  1. I am trying to fix them for effect when scrolling (line 18 in css) but look how awful images display. Any ideas?

  2. I put filter: brightness(50%); and who displayed on hover also has brightness which is really stupid but fact! It will be nice to help me :)

CODEPEN

background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center;

Solution

  • make both images the background of the one "section"

    html:

    <section id="gtco-hero" class="custom-style-parent" data-section="home">
        <div class="cs-parent">
            <div class="col-xs-6 custom-style custom-image-1">
                <a class="bg-text-cs" href="#">Los Angeles</a>
            </div>
        </div>
        <div class="cs-parent">
            <div class="col-xs-6 custom-style custom-image-2 cs-right">
                <a class="bg-text-cs" href="#">Los Angeles</a>
            </div>
        </div>
 </section>

    css:

    #gtco-hero {
  display:block;
  width:100%;
  height:100vh;
  background: 
      url("https://wallpaperbrowse.com/media/images/4052451-images.jpg"),
      url("https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg");
  filter: brightness(80%);
  background-size: 50% auto, 50% auto;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: left, right;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

#gtco-hero:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    filter: brightness(50%);
}

    https://codepen.io/carolmckayau/pen/eQrEWX

    reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image