Results 1 to 3 of 3

Thread: [RESOLVED] Not sure why this is happening in Web Page?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Resolved [RESOLVED] Not sure why this is happening in Web Page?

    I'm creating a new .html page. Right now it's just the skeleton. However, I am providing an image with opacity to cover the entire page. Unfortunately, it's not working. So I ran the page in Chrome DevTools and I checked the <body> tag to make sure the CSS rules were applied and the the "background" property was crossed out. I'm sure this is where my lack of knowledge comes in to play. I'm not including an external style sheet that would provides styling on the <body> tag. What am I doing wrong? Below is the entire page and styles.

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Portfolio</title>
            
            <style>
                html {                    
                    scroll-behavior: smooth;
                }
                
                body {
                    margin: 0;
                    padding: 0;
                    position: absolute;
                    background: #111 url('Images/IMG_0348_touched_r.png') no-repeat fixed cover;
                    opacity: 0.4;
                }
            </style>
        </head>
        
        <body>
            <div>
            </div>
        </body>
    </html>
    Blake

  2. #2
    PowerPoster
    Join Date
    Nov 2017
    Posts
    3,116

    Re: Not sure why this is happening in Web Page?

    This works for me.

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Portfolio</title>
            
            <style>
                html {                    
                    scroll-behavior: smooth;
                }
                
                body {
                    margin: 0;
                    padding: 0;
                    position: absolute;
                    background: #111 url('Images/IMG_0348_touched_r.png') no-repeat fixed;
                    background-size: cover;
                    opacity: 0.4;
                }
            </style>
        </head>
        
        <body>
            <div>
            </div>
        </body>
    </html>

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: Not sure why this is happening in Web Page?

    I finally got it working. I needed to fix the line below:

    old: background: #111 url('Images/IMG_0348_touched_r.png') no-repeat fixed;
    new: background: #111 url('/Images/IMG_0348_touched_r.png') no-repeat fixed;

    I'm not sure why that was but it seems to work now.

    Thanks Option!
    Blake

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width