Parallax Background in web page - Setting div element background to transparent does not work for me

Zahir Khan 0 Reputation points
2023-02-03T02:55:59.9233333+00:00

I don't know if I'm having a senior moment or not...

I'm trynig to implement a parallax scrolling type of display in a web page.

I have sourced the sample code from W3 Schools and adapted it, by adjusting margins basically (Please see - https://www.w3schools.com/howto/howto_css_parallax.asp).

So my code in my web page is as follows:

default2.aspx

MyWebsite.css

And the code in the css file is as follows

/* Box sizing */
*
{
   box-sizing: border-box;
}

html
{
   height: 100%;
}

/* Body element */
body
{
   margin: 0px;
   border: none;
   padding: 0px;
   height: 100%;
   /* background-color: transparent; */
}

.AspForm
{
   height: 100%;
   /* background-color: transparent; */
}

/* MasterPage Root Div */
#RootMasterDiv
{
   border-style: none;
   height: 100%;
   padding: 0px;
   /* background-color: transparent; */
}


.ContentDiv
{
   height: 100%;
   text-align: center;
   /* background-color: transparent; */
}

/* Topic Panel */
.PageTopicPanel
{
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 24px;
   border-width: 1px;
   border-style: solid;
   border-color: #0066FF;
   padding: 24px;
   width: 98%;
   text-align: left;
   vertical-align: top;
   background-color: #99CCFF;
}
.PageTopicTitle
{
   margin-top: 0px;
   margin-bottom: -10px;
   font-family: President;
   font-size: 24pt;
   letter-spacing: 1pt;
   color: #0066FF;
   text-decoration: underline;
   text-align: left;
   vertical-align: middle;
}

.PageTopicSubtitle
{
   margin-top: 0px;
   margin-bottom: 8px;
   font-family: President;
   font-size: 18pt;
   letter-spacing: 1pt;
   color: #0066FF;
   text-align: left;
   vertical-align: middle;
}

.PageTitleGlyph
{
   width: 40px;
   height: 40px;
   border: none;
   float: right;
}

.PageBodyText12
{
   font-family: Tahoma;
   font-size: 12pt;
   color: #0066FF;
   text-align: left;
   vertical-align: top;
}
.GirlMeadowParallax
{
   /* The image used */
   background-image: url('images/top.jpg');
   /* Full height */
   height: 100%;
   /* Create the parallax scrolling effect */
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.CoupleIndoorsParallax
{
   /* The image used */
   background-image: url('images/bottom.jpg');
   /* Full height */
   height: 100%;
   /* Create the parallax scrolling effect */
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

And basically, whats happening is that there is a White block instead instead of it being transparent.

issue

And when I change the background-color from transparent to red (for example) then it appears red but when i change it to transparent it appears white not transparent.

issue2

I just cannot fathom it out!

Can anyone point me in the correct direction please?

Thank You.

PS.

I have also attatched the top.jpg and bottom.jpg graphic images that i'm using for the parallax scrolling (They display okay and as expected).

top

bottom

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,247 questions
0 comments No comments
{count} votes

3 answers

Sort by: Most helpful
  1. Lan Huang-MSFT 25,391 Reputation points Microsoft Vendor
    2023-02-03T07:18:27.9566667+00:00

    Hi @Zahir Khan,

    background-color: transparent; Specifies that the background color should be transparent. But the browser color is white.

    Do you want to set the browser's "transparency"?

    This is impossible. CSS/HTML is rendered in the browser, you cannot set browser "transparency" with css.

    You need to set the HTML page to be different from the default color of the browser to see the effect.

    User's image

    User's image

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

  2. Zahir Khan 0 Reputation points
    2023-02-04T00:20:00.73+00:00

    So it's not possible?

    Thank you for your time....

    I just wanted parallax scrolling and my content inbetween but with a margin on either side, and the background to show through, rather than the (browser?) background being white?

    Thanks

    0 comments No comments

  3. Zahir Khan 0 Reputation points
    2023-02-04T10:51:00.39+00:00

    UPDATE

    Well I managed to get it workig by doing some online research.

    parallax

    It appears that I needed to use z-index to correctly display it the way I wanted.

    I've attached the files for completeness.

    Default3.Aspx

    Parallax.Css

    Thank You to Lang too for trying to help me.

    0 comments No comments