[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>
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>
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!
