Saumyojit
Well-Known Coder
Code:
<!DOCTYPE html>
<html>
<body style="background-color:lightblue;">
<h2>height of Image is larger than Display Red block</h2>
<p>CUT OFF for background color to show is 44px(less than 44px). Height of block associated
with the below text is 44px or less than that </p>
<p class="hz" style="background:orange;">HERE IS SOME GENERIC CONTENT</p>
<br><br><br><br><br><br>
<p>ANURAG KASHYAP SATYAJIT RAY</p>
</body>
</html>
I have put some text before closing tag of body
Code:
.hz::before{
background: red;
display:block;
height: 10px;
/* height of block*/
content:url(buddha.jpg);
}
output:
2nd case
Code:
<!DOCTYPE html>
<html>
<body style="background-color:lightblue;">
<h2>height of Image is larger than Display Red block</h2>
<p>CUT OFF for background color to show is 44px(less than 44px). Height of block associated
with the below text is 44px or less than that </p>
<p class="hz" style="background:orange;">HERE IS SOME GENERIC CONTENT </p>
</body>
</html>
Code:
.hz::before{
background: red;
display:block;
height: 10px;
/* height of block*/
content:url(buddha.jpg);
}
Why the background color:light blue shows?
@LTomy @Mangini