Home/ Questions/Q 7619163
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T03:36:47+00:00

I’m using a CSS fix to ensure opacity doesn’t effect inner elements and I’ve

  • 0

I’m using a CSS fix to ensure opacity doesn’t effect inner elements and I’ve run into a problem. The image will only stretch to 100% of the visible page. My page is fairly tall however, half of it is hidden and only accessible by scrolling down. Once you scroll down though, the image container ends and I only get a solid fill color. Can this be fixed, perhaps CSS or jQuery?

Example:
enter image description here

HTML:

<body><!-- Bg Color -->
    <div class="bgImg"></div><!-- Bg Image Container -->
    <div data-role="page" class="type-home" data-theme="a">



    </div>
</body>

CSS:

body { background-color: red; }

.bgImg {
    background-image: url(../images/patterns/pattern9.png);
    opacity: 0.8;
    filter: alpha(opacity=0.8;);
    -khtml-opacity: 0.8;
    -moz-opacity: 0.8;
    -webkit-opacity: 0.8;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the easiest would be to change it to position:fixed; then your background won’t scroll at all

    if you do want your background to scroll, then you could use javascript (or a javascript library) to get the height of your content and dynamically set the height of the background.

    jquery:

    $("div.bgImg").height($("div.type-home").height());
    • 0