• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS CONTENT PROPERTY

Saumyojit

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:Screenshot (227).png








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);
}

Screenshot (226).png

Why the background color:light blue shows?


@LTomy @Mangini
 

LTomy

Active Coder
Staff Team
Guardian
1. Specify the language when you post code.
2. Please specify the difference between the two examples.
3. Avoid @someone unless your thread has been unreplied for a while.

The wood-like texture is applied on which element?

When you use <br><br><br><br><br><br>, its makes the element with the wood-like texture taller and therefore covers the whole screen. Otherwise, it is too short and a bit of the <body> is displayed.
If you want it to covers all the surface of its parent, simply give the element with the wood-like texture the attribute height:100%;.
 

Saumyojit

Coder
1. Specify the language when you post code.
2. Please specify the difference between the two examples.
3. Avoid @someone unless your thread has been unreplied for a while.

The wood-like texture is applied on which element?

When you use <br><br><br><br><br><br>, its makes the element with the wood-like texture taller and therefore covers the whole screen. Otherwise, it is too short and a bit of the <body> is displayed.
If you want it to covers all the surface of its parent, simply give the element with the wood-like texture the attribute height:100%;.
CSS:
body
  {

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

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



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



.hz::before{
 background: red;
  display:block;
  height: 10px;
  /* height of block*/

content:url(buddha.jpg);
}

I have given the height of wood like image 100 percent from the beiginning .

<br><br><br><br><br><br>
even if i write without <br>

HTML:
<!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>




<p>ANURAG KASHYAP SATYAJIT RAY</p>
</body>
</html>

The background color light blue shows
 

Saumyojit

Coder
background-size: cover;
i tried . but nothing works .
I was asking rather why the background color shows when the code is written like this

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



<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);
}


but not when

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><br><br><br><br>



</body>
</html>


PLEASE TELL ME THE REASON . PLease be straight and come to the point .
Doin't tell always the rules that i need to put code inside <code>...that does not clear my doubt


NO one HAS commented on the post other than LTOMY and there are so many members here. WOW.
thanks @LTomy for ur support.
 

LTomy

Active Coder
Staff Team
Guardian
NO one HAS commented on the post other than LTOMY and there are so many members here. WOW.
You are a member here. I did not see you help anyone?

The <br><br><br><br><br><br> increases the height of the <body>. Why isn't the background-image taking up the additionnal space? I don't know.
 

Saumyojit

Coder
You are a member here. I did not see you help anyone?

The <br><br><br><br><br><br> increases the height of the <body>. Why isn't the background-image taking up the additionnal space? I don't know.
I am just learning html css . i dont know nothing.
yes thats right . Why???
please comment on the other post of mine back img vs color
 

LTomy

Active Coder
Staff Team
Guardian
please comment on the other post of mine back img vs color
Don't ask people to reply to your posts. If they don't, it is either because they do not have the time or they do not know.

Also, try figuring things by yourself first, otherwise, you will be asking questions literally all the time and you won't learn to do it by yourself.
 

Saumyojit

Coder
Don't ask people to reply to your posts. If they don't, it is either because they do not have the time or they do not know.

Also, try figuring things by yourself first, otherwise, you will be asking questions literally all the time and you won't learn to do it by yourself.
I am with both of these doubts for last 4 days . I did everything on my behalf .
Neverthless, please see that doubt once
 

Saumyojit

Coder
1617800419361.png

ANother thing which i dont understand is that
CSS:
.hz::before{
content:url(buddha.jpg);
    background: red;
  display:block;
  height: 10px;
  }
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?




The <br><br><br><br><br><br> increases the height of the <body>. Why isn't the background-image taking up the additionnal space? I don't know.
it increases the height of the body thats right .

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.​
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.
 
Top