Confusion with Content property and before pseduo selector

<!DOCTYPE html>
<html>
<body style="background-color:lightblue;">



<p class="hz" style="background:orange;">HERE IS SOME GENERIC CONTENT </p>

</body>
</html>
.hz::before{

  background: red;
  display:block;
  height: 10px;
  /* height of block*/
content:url(buddha.jpg);
}



  body
  {


background-image:url("pass.jpeg"),url("skin.jfif");

    /*inserting multiple images in the background*/


    background-repeat: no-repeat,no-repeat;

    /* any background image will start from the top left corner of the element targeted*/

  background-size: 100% 50%, 100% 100%;

  /* setting the width and height of both the images */

  }

Here the backimage shows but not full

CASE 2:

<!DOCTYPE html>
<html>
<body style="background-color:lightblue;">



<p class="hz" style="background:orange;">HERE IS SOME GENERIC CONTENT</p>


<br><br><br><br><br><br>

</body>
</html>
.hz::before{

  background: red;
  display:block;
  height: 10px;
  /* height of block*/
content:url(buddha.jpg);
}

  body
  {

background-image:url("pass.jpeg"),url("skin.jfif");

  background-repeat: no-repeat,no-repeat;
background-size: 100% 50%, 100% 100%;
  }

The br,br,br,br,br,br increases the height of the body

The back image is not taking up additional space when there is no break i am giving but when i am giving breaks then back imag covers whole of the body .

Actually it makes sense as when i am giving breaks, the 2nd back image size is 100 percent of total body so it covers the whole screen and when i am not giving breaks then the 2nd back image is also covering 100 percent of total body .​

​But when i am not giving breaks the body (if u inspect using f12) is upto a certain limit not the full height of the screen thats why (not giving breaks) the back image is covering upto the closing tag of body Element only.​

Q: ​but the problemn is that why the background color : light blue is showing in that extra space area when i styled the body as background color lightblue not the html element .​

IS the background color sort of compensating for the remaining left out area …then the color should be white isn’t it ? as default color is genrally white as far i know.

ANOTHER PROBLEMN:

Here why the text “HERE IS SOME GENERIC CONTENT” why does it come just after the red block but not after the Image which is the content of The Content property.
But if i write only content:url(buddha.jpg) inside the code ; then the image precedes the paragraph text .
How does creating a block makes a difference in processing ::before pseudoselector?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.