Div::after making page have opacity












0















I have css sheet that keeps making one of my webpages have the same opacity as the background image, but it doesn't do it to the others. I don't want the whole page to have the opacity, just the background. I've played around with it but I'm not exactly sure why it's doing it to this page in particular. The only thing that's different is that this page has a table, the others either have a form or don't have one. Let me know if I should share some of the html.
The css that's causing it:



 div::after {
min-height: 100%;
min-width: 1024px;
pointer-events: none;
width: 100%;
height: auto;
top: 0;
left: 0;
content: "";
display: block;
position: fixed;
background: url(brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.1;
}


Added html:



<html>
<head>
<meta charset="utf-8" />
<script>
function display() {
document.getElementById("displayarea").innerHTML = document.getElementById("fname").value;
document.getElementById("fname").value = "";
document.getElementById("displayarea1").innerHTML = document.getElementById("pname").value;
document.getElementById("pname").value = "";
document.getElementById("displayarea2").innerHTML = document.getElementById("rname").value;
document.getElementById("rname").value = "";
document.getElementById("displayarea3").innerHTML = document.getElementById("kname").value;
document.getElementById("kname").value = "";
document.getElementById("displayarea4").innerHTML = document.getElementById("hname").value;
document.getElementById("hname").value = "";
document.getElementById("displayarea5").innerHTML = document.getElementById("oname").value;
document.getElementById("oname").value = "";
}
</script>
<link href="general.css" rel="stylesheet" />
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="formpage1.html">Quiz page 1</a></li>
</ul>
</nav>

<article>
<h1>Goal Setting</h1>
<p></p>
</article>
</header>
<table bgcolor="#FF00FF" border="1" align="center">
<tr>
<td>Goal</td>
<td><input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=pname" id="pname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="rname" id="rname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=kname" id="kname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="hname" id="hname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=oname" id="oname"></td>
</tr>

<tr>
<td>&nbsp</td>
<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display(event)" /></td>
</tr>
</table>
<table width="400px" align="center" border=0>

<tr style="background-color:#8FBC8F;">
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
</tr>
<tr>
<td align="center">
<div id="displayarea"></div>
</td>
<td align="center">
<div id="displayarea1"></div>
</td>
<td align="center">
<div id="displayarea2"></div>
</td>
<td align="center">
<div id="displayarea3"></div>
</td>
<td align="center">
<div id="displayarea4"></div>
</td>
<td align="center">
<div id="displayarea5"></div>
</td>
</tr>
</table>
<footer></footer>
</body>
</html>


So bottom pic is what it looks like right now, it shares the same opacity as the background but I only want the background to have it, not the content. The above pic is what another page looks like, I want it to look like that.










share|improve this question

























  • Add your HTML too

    – Viira
    Nov 24 '18 at 8:36











  • Is the HTML for the web-page which doesn't behave correctly?

    – Alex Leo
    Nov 24 '18 at 9:01











  • What is it exactly that you want to achieve? Maybe include a screenshot of the desired outcome you want.

    – Danny
    Nov 24 '18 at 10:33













  • You should share enough HTML and CSS to allow us to reproduce the issue. Using a Stack Snippet is a good way of achieving that. Do note that you have a number of missing parentheses in your HTML, and you're using deprecated appearance-related attributes (bgcolor, align) that could be interfering with your CSS.

    – Heretic Monkey
    Nov 24 '18 at 18:48











  • With div::after you've literally added pseudo element to every possible div on your page. It's extremely bad practice. First of all, if you just want a background, I don't see any reason to do it with pseudo element when you have background-image in CSS. If for some reason you MUST use pseudo ::after use it on a specific element (ideally target it with a class).

    – Nemanja Glumac
    Nov 24 '18 at 18:52
















0















I have css sheet that keeps making one of my webpages have the same opacity as the background image, but it doesn't do it to the others. I don't want the whole page to have the opacity, just the background. I've played around with it but I'm not exactly sure why it's doing it to this page in particular. The only thing that's different is that this page has a table, the others either have a form or don't have one. Let me know if I should share some of the html.
The css that's causing it:



 div::after {
min-height: 100%;
min-width: 1024px;
pointer-events: none;
width: 100%;
height: auto;
top: 0;
left: 0;
content: "";
display: block;
position: fixed;
background: url(brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.1;
}


Added html:



<html>
<head>
<meta charset="utf-8" />
<script>
function display() {
document.getElementById("displayarea").innerHTML = document.getElementById("fname").value;
document.getElementById("fname").value = "";
document.getElementById("displayarea1").innerHTML = document.getElementById("pname").value;
document.getElementById("pname").value = "";
document.getElementById("displayarea2").innerHTML = document.getElementById("rname").value;
document.getElementById("rname").value = "";
document.getElementById("displayarea3").innerHTML = document.getElementById("kname").value;
document.getElementById("kname").value = "";
document.getElementById("displayarea4").innerHTML = document.getElementById("hname").value;
document.getElementById("hname").value = "";
document.getElementById("displayarea5").innerHTML = document.getElementById("oname").value;
document.getElementById("oname").value = "";
}
</script>
<link href="general.css" rel="stylesheet" />
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="formpage1.html">Quiz page 1</a></li>
</ul>
</nav>

<article>
<h1>Goal Setting</h1>
<p></p>
</article>
</header>
<table bgcolor="#FF00FF" border="1" align="center">
<tr>
<td>Goal</td>
<td><input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=pname" id="pname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="rname" id="rname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=kname" id="kname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="hname" id="hname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=oname" id="oname"></td>
</tr>

<tr>
<td>&nbsp</td>
<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display(event)" /></td>
</tr>
</table>
<table width="400px" align="center" border=0>

<tr style="background-color:#8FBC8F;">
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
</tr>
<tr>
<td align="center">
<div id="displayarea"></div>
</td>
<td align="center">
<div id="displayarea1"></div>
</td>
<td align="center">
<div id="displayarea2"></div>
</td>
<td align="center">
<div id="displayarea3"></div>
</td>
<td align="center">
<div id="displayarea4"></div>
</td>
<td align="center">
<div id="displayarea5"></div>
</td>
</tr>
</table>
<footer></footer>
</body>
</html>


So bottom pic is what it looks like right now, it shares the same opacity as the background but I only want the background to have it, not the content. The above pic is what another page looks like, I want it to look like that.










share|improve this question

























  • Add your HTML too

    – Viira
    Nov 24 '18 at 8:36











  • Is the HTML for the web-page which doesn't behave correctly?

    – Alex Leo
    Nov 24 '18 at 9:01











  • What is it exactly that you want to achieve? Maybe include a screenshot of the desired outcome you want.

    – Danny
    Nov 24 '18 at 10:33













  • You should share enough HTML and CSS to allow us to reproduce the issue. Using a Stack Snippet is a good way of achieving that. Do note that you have a number of missing parentheses in your HTML, and you're using deprecated appearance-related attributes (bgcolor, align) that could be interfering with your CSS.

    – Heretic Monkey
    Nov 24 '18 at 18:48











  • With div::after you've literally added pseudo element to every possible div on your page. It's extremely bad practice. First of all, if you just want a background, I don't see any reason to do it with pseudo element when you have background-image in CSS. If for some reason you MUST use pseudo ::after use it on a specific element (ideally target it with a class).

    – Nemanja Glumac
    Nov 24 '18 at 18:52














0












0








0








I have css sheet that keeps making one of my webpages have the same opacity as the background image, but it doesn't do it to the others. I don't want the whole page to have the opacity, just the background. I've played around with it but I'm not exactly sure why it's doing it to this page in particular. The only thing that's different is that this page has a table, the others either have a form or don't have one. Let me know if I should share some of the html.
The css that's causing it:



 div::after {
min-height: 100%;
min-width: 1024px;
pointer-events: none;
width: 100%;
height: auto;
top: 0;
left: 0;
content: "";
display: block;
position: fixed;
background: url(brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.1;
}


Added html:



<html>
<head>
<meta charset="utf-8" />
<script>
function display() {
document.getElementById("displayarea").innerHTML = document.getElementById("fname").value;
document.getElementById("fname").value = "";
document.getElementById("displayarea1").innerHTML = document.getElementById("pname").value;
document.getElementById("pname").value = "";
document.getElementById("displayarea2").innerHTML = document.getElementById("rname").value;
document.getElementById("rname").value = "";
document.getElementById("displayarea3").innerHTML = document.getElementById("kname").value;
document.getElementById("kname").value = "";
document.getElementById("displayarea4").innerHTML = document.getElementById("hname").value;
document.getElementById("hname").value = "";
document.getElementById("displayarea5").innerHTML = document.getElementById("oname").value;
document.getElementById("oname").value = "";
}
</script>
<link href="general.css" rel="stylesheet" />
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="formpage1.html">Quiz page 1</a></li>
</ul>
</nav>

<article>
<h1>Goal Setting</h1>
<p></p>
</article>
</header>
<table bgcolor="#FF00FF" border="1" align="center">
<tr>
<td>Goal</td>
<td><input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=pname" id="pname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="rname" id="rname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=kname" id="kname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="hname" id="hname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=oname" id="oname"></td>
</tr>

<tr>
<td>&nbsp</td>
<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display(event)" /></td>
</tr>
</table>
<table width="400px" align="center" border=0>

<tr style="background-color:#8FBC8F;">
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
</tr>
<tr>
<td align="center">
<div id="displayarea"></div>
</td>
<td align="center">
<div id="displayarea1"></div>
</td>
<td align="center">
<div id="displayarea2"></div>
</td>
<td align="center">
<div id="displayarea3"></div>
</td>
<td align="center">
<div id="displayarea4"></div>
</td>
<td align="center">
<div id="displayarea5"></div>
</td>
</tr>
</table>
<footer></footer>
</body>
</html>


So bottom pic is what it looks like right now, it shares the same opacity as the background but I only want the background to have it, not the content. The above pic is what another page looks like, I want it to look like that.










share|improve this question
















I have css sheet that keeps making one of my webpages have the same opacity as the background image, but it doesn't do it to the others. I don't want the whole page to have the opacity, just the background. I've played around with it but I'm not exactly sure why it's doing it to this page in particular. The only thing that's different is that this page has a table, the others either have a form or don't have one. Let me know if I should share some of the html.
The css that's causing it:



 div::after {
min-height: 100%;
min-width: 1024px;
pointer-events: none;
width: 100%;
height: auto;
top: 0;
left: 0;
content: "";
display: block;
position: fixed;
background: url(brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.1;
}


Added html:



<html>
<head>
<meta charset="utf-8" />
<script>
function display() {
document.getElementById("displayarea").innerHTML = document.getElementById("fname").value;
document.getElementById("fname").value = "";
document.getElementById("displayarea1").innerHTML = document.getElementById("pname").value;
document.getElementById("pname").value = "";
document.getElementById("displayarea2").innerHTML = document.getElementById("rname").value;
document.getElementById("rname").value = "";
document.getElementById("displayarea3").innerHTML = document.getElementById("kname").value;
document.getElementById("kname").value = "";
document.getElementById("displayarea4").innerHTML = document.getElementById("hname").value;
document.getElementById("hname").value = "";
document.getElementById("displayarea5").innerHTML = document.getElementById("oname").value;
document.getElementById("oname").value = "";
}
</script>
<link href="general.css" rel="stylesheet" />
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="formpage1.html">Quiz page 1</a></li>
</ul>
</nav>

<article>
<h1>Goal Setting</h1>
<p></p>
</article>
</header>
<table bgcolor="#FF00FF" border="1" align="center">
<tr>
<td>Goal</td>
<td><input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=pname" id="pname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="rname" id="rname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=kname" id="kname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="hname" id="hname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=oname" id="oname"></td>
</tr>

<tr>
<td>&nbsp</td>
<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display(event)" /></td>
</tr>
</table>
<table width="400px" align="center" border=0>

<tr style="background-color:#8FBC8F;">
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
</tr>
<tr>
<td align="center">
<div id="displayarea"></div>
</td>
<td align="center">
<div id="displayarea1"></div>
</td>
<td align="center">
<div id="displayarea2"></div>
</td>
<td align="center">
<div id="displayarea3"></div>
</td>
<td align="center">
<div id="displayarea4"></div>
</td>
<td align="center">
<div id="displayarea5"></div>
</td>
</tr>
</table>
<footer></footer>
</body>
</html>


So bottom pic is what it looks like right now, it shares the same opacity as the background but I only want the background to have it, not the content. The above pic is what another page looks like, I want it to look like that.







html css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 24 '18 at 18:42







Jackie

















asked Nov 24 '18 at 8:31









Jackie Jackie

615




615













  • Add your HTML too

    – Viira
    Nov 24 '18 at 8:36











  • Is the HTML for the web-page which doesn't behave correctly?

    – Alex Leo
    Nov 24 '18 at 9:01











  • What is it exactly that you want to achieve? Maybe include a screenshot of the desired outcome you want.

    – Danny
    Nov 24 '18 at 10:33













  • You should share enough HTML and CSS to allow us to reproduce the issue. Using a Stack Snippet is a good way of achieving that. Do note that you have a number of missing parentheses in your HTML, and you're using deprecated appearance-related attributes (bgcolor, align) that could be interfering with your CSS.

    – Heretic Monkey
    Nov 24 '18 at 18:48











  • With div::after you've literally added pseudo element to every possible div on your page. It's extremely bad practice. First of all, if you just want a background, I don't see any reason to do it with pseudo element when you have background-image in CSS. If for some reason you MUST use pseudo ::after use it on a specific element (ideally target it with a class).

    – Nemanja Glumac
    Nov 24 '18 at 18:52



















  • Add your HTML too

    – Viira
    Nov 24 '18 at 8:36











  • Is the HTML for the web-page which doesn't behave correctly?

    – Alex Leo
    Nov 24 '18 at 9:01











  • What is it exactly that you want to achieve? Maybe include a screenshot of the desired outcome you want.

    – Danny
    Nov 24 '18 at 10:33













  • You should share enough HTML and CSS to allow us to reproduce the issue. Using a Stack Snippet is a good way of achieving that. Do note that you have a number of missing parentheses in your HTML, and you're using deprecated appearance-related attributes (bgcolor, align) that could be interfering with your CSS.

    – Heretic Monkey
    Nov 24 '18 at 18:48











  • With div::after you've literally added pseudo element to every possible div on your page. It's extremely bad practice. First of all, if you just want a background, I don't see any reason to do it with pseudo element when you have background-image in CSS. If for some reason you MUST use pseudo ::after use it on a specific element (ideally target it with a class).

    – Nemanja Glumac
    Nov 24 '18 at 18:52

















Add your HTML too

– Viira
Nov 24 '18 at 8:36





Add your HTML too

– Viira
Nov 24 '18 at 8:36













Is the HTML for the web-page which doesn't behave correctly?

– Alex Leo
Nov 24 '18 at 9:01





Is the HTML for the web-page which doesn't behave correctly?

– Alex Leo
Nov 24 '18 at 9:01













What is it exactly that you want to achieve? Maybe include a screenshot of the desired outcome you want.

– Danny
Nov 24 '18 at 10:33







What is it exactly that you want to achieve? Maybe include a screenshot of the desired outcome you want.

– Danny
Nov 24 '18 at 10:33















You should share enough HTML and CSS to allow us to reproduce the issue. Using a Stack Snippet is a good way of achieving that. Do note that you have a number of missing parentheses in your HTML, and you're using deprecated appearance-related attributes (bgcolor, align) that could be interfering with your CSS.

– Heretic Monkey
Nov 24 '18 at 18:48





You should share enough HTML and CSS to allow us to reproduce the issue. Using a Stack Snippet is a good way of achieving that. Do note that you have a number of missing parentheses in your HTML, and you're using deprecated appearance-related attributes (bgcolor, align) that could be interfering with your CSS.

– Heretic Monkey
Nov 24 '18 at 18:48













With div::after you've literally added pseudo element to every possible div on your page. It's extremely bad practice. First of all, if you just want a background, I don't see any reason to do it with pseudo element when you have background-image in CSS. If for some reason you MUST use pseudo ::after use it on a specific element (ideally target it with a class).

– Nemanja Glumac
Nov 24 '18 at 18:52





With div::after you've literally added pseudo element to every possible div on your page. It's extremely bad practice. First of all, if you just want a background, I don't see any reason to do it with pseudo element when you have background-image in CSS. If for some reason you MUST use pseudo ::after use it on a specific element (ideally target it with a class).

– Nemanja Glumac
Nov 24 '18 at 18:52












1 Answer
1






active

oldest

votes


















1














@jackie, it's not making everything transparent, but the image is actually above your page content, thus making it look opaque as well. Your solution is to set z-index of ::after pseudoelement to -1.



div::after {
min-height: 100%;
min-width: 1024px;
pointer-events: none;
width: 100%;
height: auto;
top: 0;
left: 0;
content: "";
display: block;
position: fixed;
background: url(brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.1;
z-index: -1;
}


But like I said in the comment, I would highly suggest that you target very specific element with a class on it, instead of applying ::after to every directly to div element.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53456507%2fdivafter-making-page-have-opacity%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    @jackie, it's not making everything transparent, but the image is actually above your page content, thus making it look opaque as well. Your solution is to set z-index of ::after pseudoelement to -1.



    div::after {
    min-height: 100%;
    min-width: 1024px;
    pointer-events: none;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    content: "";
    display: block;
    position: fixed;
    background: url(brain.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    opacity: 0.1;
    z-index: -1;
    }


    But like I said in the comment, I would highly suggest that you target very specific element with a class on it, instead of applying ::after to every directly to div element.






    share|improve this answer




























      1














      @jackie, it's not making everything transparent, but the image is actually above your page content, thus making it look opaque as well. Your solution is to set z-index of ::after pseudoelement to -1.



      div::after {
      min-height: 100%;
      min-width: 1024px;
      pointer-events: none;
      width: 100%;
      height: auto;
      top: 0;
      left: 0;
      content: "";
      display: block;
      position: fixed;
      background: url(brain.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      opacity: 0.1;
      z-index: -1;
      }


      But like I said in the comment, I would highly suggest that you target very specific element with a class on it, instead of applying ::after to every directly to div element.






      share|improve this answer


























        1












        1








        1







        @jackie, it's not making everything transparent, but the image is actually above your page content, thus making it look opaque as well. Your solution is to set z-index of ::after pseudoelement to -1.



        div::after {
        min-height: 100%;
        min-width: 1024px;
        pointer-events: none;
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        content: "";
        display: block;
        position: fixed;
        background: url(brain.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        opacity: 0.1;
        z-index: -1;
        }


        But like I said in the comment, I would highly suggest that you target very specific element with a class on it, instead of applying ::after to every directly to div element.






        share|improve this answer













        @jackie, it's not making everything transparent, but the image is actually above your page content, thus making it look opaque as well. Your solution is to set z-index of ::after pseudoelement to -1.



        div::after {
        min-height: 100%;
        min-width: 1024px;
        pointer-events: none;
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        content: "";
        display: block;
        position: fixed;
        background: url(brain.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        opacity: 0.1;
        z-index: -1;
        }


        But like I said in the comment, I would highly suggest that you target very specific element with a class on it, instead of applying ::after to every directly to div element.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 24 '18 at 19:12









        Nemanja GlumacNemanja Glumac

        519213




        519213
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53456507%2fdivafter-making-page-have-opacity%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Ottavio Pratesi

            Tricia Helfer

            15 giugno