Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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

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: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
 
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%;.
 
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
 
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.
 
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.
 
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
 
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.
 
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
 
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.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom