Div::after making page have opacity
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> </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
add a comment |
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> </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
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
Withdiv::afteryou'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 havebackground-imagein CSS. If for some reason you MUST use pseudo::afteruse it on a specific element (ideally target it with a class).
– Nemanja Glumac
Nov 24 '18 at 18:52
add a comment |
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> </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
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> </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
html css
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
Withdiv::afteryou'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 havebackground-imagein CSS. If for some reason you MUST use pseudo::afteruse it on a specific element (ideally target it with a class).
– Nemanja Glumac
Nov 24 '18 at 18:52
add a comment |
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
Withdiv::afteryou'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 havebackground-imagein CSS. If for some reason you MUST use pseudo::afteruse 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
add a comment |
1 Answer
1
active
oldest
votes
@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.
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
@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.
add a comment |
@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.
add a comment |
@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.
@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.
answered Nov 24 '18 at 19:12
Nemanja GlumacNemanja Glumac
519213
519213
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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::afteryou'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 havebackground-imagein CSS. If for some reason you MUST use pseudo::afteruse it on a specific element (ideally target it with a class).– Nemanja Glumac
Nov 24 '18 at 18:52