Content property

torresjit100 · April 7, 2021, 5:44pm

<!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;">

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

</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 */

  }

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?

PaulOB · April 7, 2021, 9:18pm

When you apply a background color to the body element it automatically propagates to the html element (assuming no background on the html element has been defined). That’s because originally background colors were only defined for the body element and older browsers (<ie6) didn’t really have a concept of the html element (we’re talking long ago now).

So commonly you don’t need to apply a background color to the html element as a background color on the body will propagate to the html element and flood the whole viewport. This is not the case with images when you use background-size in percent but a normal repeated image on the body element will also fill the viewport. Percentages in CSS need something to base their percentage on so you would need the html element to have a height of 100% and then you could set a min-height:100% on the body element for your pictures. Or instead have a min-height:100% on the html element and add your images there instead.

However it is likely that none of those approaches will do what you expect so I would need to know the exact dynamics of what you are trying to achieve before offering real code? I expect that you are looking for fixed viewport images that don’t scroll with the document and that requires different techniques.

You have set the .hz::before to 10px height and the browser does what you tell it. The fact that you put a large image in a 10px space is no concern to the browser and anything over the 10px height just overflows the element and is ignored in the flow of the document. The browser has been told the element is 10px high so that’s what you get. You get 10px of your image inside the element and the rest just pokes out. If you add overflow:hidden to that element you will see that the image is cut off. Overflow is visible by default which means you can see it but it does not partake in the flow of the document.

Yes the body element by default is only as tall as its content and if you wanted an initial full height body element you would need to use something like min-height:100vh on the body element. You would also need to negate the margin/padding from the body as that would interfere with those calculations.

If you can elaborate on what you are trying to achieve and the dynamics of how you want it to behave with and without content then we can point you in the right direction

torresjit100 · April 8, 2021, 7:49pm

I did not have any objective in my mind . I was learning css and was playing around with the code(what if i do this …) . So in terms of doing that I got this doubt.

ONE thing to remember is that Image overrides color in the portion that they share , and text sits top on of the image and color .I will actually not say override in case of text as we can see whats behind the text .

"You have set the .hzk::before to 10px height and the browser does what you tell it. The fact that you put a large image in a 10px space is no concern to the browser "

I set a display BLOCK which is red in color to some Height and also told the browser to insert a image before the text of the paragraph and the whole thing(image+block) shall be placed inside paragraph element.
Right?
SO i told the browser to do two things .

I know that :: before pseudoselector and content property go hand in hand right?

If i put something inside content why the browser does not pay attention to the content of content property but pay attention to the HEIGHT OF red block which is not associated with CONTENT property

Okay so i am telling the browser to treat the content (i.e the image) as a block element such that the text cannot placed in the same row as the image and only that specified value of Height shall be taken into account of the image and the text will be under the cropped image and the red block .

Now if the red block size is bigger than the image then i see that the image is inside the red block but only the RED BLOCK precedes the text of the paragraph.

This is coz as u say “The browser has been told the element is some value px high so that’s what you get.”

Which element is high …u are talking about the part which will be before the text of the paragraph right? i.e the block

And so when the height of the block is mentioned it does not matter how tall the Content is …the text inside pargraph elemnt is always gonna be after the block
right??

Another thing i found out that the body element ends just where the paragraph element ends.

the same “QUIRK” concept goes for back image also , it covers the whole Side viewport (but the body does not include margin still)…although i have not styled html element .
And the height of the Pink background images goes beyond a certain limit after the closing tag of body and then stops . Then the background color:lightblue starts

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

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

</body>
</html>

body
  {


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

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

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

.hz::before{

background: red;
  display:block;
  height: 10px;

content:url(buddha.jpg);
}

if u see the image closely the pink background - image stretches a little bit from the closing tag of the body after the 8px margin …but the back image is supposed to cover 100 percent of body so it should have ended in the highlighted region.
Right?

PaulOB · April 8, 2021, 10:17pm

I actually answered these questions in my last post so please read it again but I will try and clarify a few extra points

Perhaps it would help if I explained roughly what the content property does. The content property inserts some content into an element (either :before or :after the content in that element). For example in your demo when you use the content property to insert your image into the element called hz you are effectively creating a structure like this.

<p class="hz"><span><img src="img.jpg"></span>HERE IS SOME GENERIC CONTENT </p>

The content property has inserted an image into the element called hz before the actual content in that element and you can imagine that the content is wrapped in an invisible span (i.e. the ::before pseudo element). You have set the content to display:block in the ::before rule and sets its height to 10px. That basically means the image is contained in an element with only 10px height (think of it as the span wrapping an image). The pseudo elements :before and :after work in tandem with the content property. If you imagine the pseudo element being a span and your content property’s content sits inside that span. In your case an image sits inside a span and the span has been set to display block with only a height of 10px. The content property is inside the before element and therefore that element will control how tall the inner content will be allowed to be if you have set heights and display:block etc.

Therefore only 10px of the image will be within that ::before element and the rest of the image overflows. Your image is taller than 10px so it just overflows and is ignored by the browser.

That’s why the words “HERE IS SOME GENERIC CONTENT” follow after 10px of the image is shown. The hz paragraph which is orange will follow down with the words as shown in your example. The rest of the image you inserted into a 10px element is ignored as if it doesn’t exist. That’s the way the box model works.

If you apply a height to a parent element you cannot have a child that is taller than than the parent . If your child element is taller than the parent then the extra content just overflows and is ignored in the flow of the document.

If you are still talking about the image you inserted with the content property then of course an image sits on a background. That’s absolutely normal. The text “HERE IS SOME GENERIC CONTENT” is on top of the image only because as far as the browser is concerned that part of the image is overflowing content and ignored.

I also mentioned this in my last post and the body is only as tall as the content it holds.

A background color applied to the body will behave as if its applied to the html element as mentioned in detail in my last post. Background images will also propagate to the html element but if you set a background-size in percent then there must be something to base that percentage on or the body must be full of content.

Once again its the overflow of that content property image that allows the viewport to scroll so that you can see it but it takes no part on the flow and does not increase the height of the body element and thus all you get is the lightblue background that was propagated to the html element. If you remove your 10px height from your :before rule you will see things start to fall into place properly.

Sorry, but I don’t quite follow what you are asking as your demo doesn’t match what you are saying or the screenshot you posted. I suggest that you put up a live example to make it easier for us to explain. You can use https://codepen.io/ to put up demos and allow people to more easily play with the code (codepen is free). (If you need example images for demos then you can use https://picsum.photos/ to get placeholder images for demos).

You also need to understand collapsing margins as that will have an effect on how elements behave and the default margin on the p will collapse onto the body and effectively move the body down.

It’s probably best if you put up a live demo and then we can run through these points again

wake689 · April 9, 2021, 10:12am

Ooo! That’s cool. Great tip, thank you.

TechnoBear · April 9, 2021, 10:48am

Of course, if you want to be really cool, you can use https://placebear.com/.

wake689 · April 9, 2021, 11:00am

Niche

torresjit100 · April 9, 2021, 7:47pm

NICE intuition

::before i knew that it is a pseudo element selector but not a pseudo element . The term “element” is used in html only right?
okay but for explanation i see that before can be assumed as a element which is a block wrt to the text of p and a span wrt to the image.

SO the parent element is the Before element right.
And the child element is the image or the content of the content property??

“is ignored in the flow of the document” means that the text of the para (HERE IS SOME GENERIC CONTENT) will not follow from the overflowed portion of the image right?
or
u meant the overflowed portion of the image is ignored by the body element right? or both by the html and body element something like that

YES in my code the body is full of content.

YES the image which is out of the paragraph element is also out of the body element but is in the viewport so that one can see the overflow part.

okay may be thats why the 2nd back image named pink extends a certain limit beyond the closing tag of body . Thats the reason right?
see i dont know these collapsing margin concept i am learning css and i am in the ::pseudoselector part …haven’t got so far

SEE carefully!!! the html takes up this highlighted area .
Now the bg color green (i changed to green from blue)
was given to body element and it was propagated to html OK.

But as u see in this pic html element is ending at a certain point
and then green color is there a little bit beyond html . HOW SO?
THIS IS also due to collapsing margin?

IF the bg color green is propagated to html element , then why the HTML element is not covering the full height of the browser??
in inspection i saw that the html is covering that much height as shown in the pic.

There is nothing to be given . I was asking why did the second bg image named PINK is going beyond the body element (screenshot given in post#3) when i told the browser that the background size (height) is 100 percent of the body.(see above for the code)

ANOTHER DOUBT:

<!DOCTYPE html>
<html>
<head>

  </head>

<body style=" background-color: lightgreen;">

</body>
<br><br>


<p>"HERE IS SOME GENERIC CONTENT"</p>

</html>

EVERYTHING IS SAME IN CSS AS BEFORE. I wrote some text after closing of body

WHen i insepected by f12 i see that the height of the body covers the second or the last paragraph text (that i added)also but i wrote it outside of body only in html element. HOW SO??

I could not add the screenshot coz the site has some rules. (very bad)

PaulOB · April 10, 2021, 1:20pm

Yes mostly correct except:

The ::before pseudo element actually generates an inline box like a span (when content is inserted through the content property) but as with most html elements you can change the display: to block in the css. Without any generated content the ::before pseudo element is empty and will generate no box at all and won’t exist. That why when you use ::before (or ::after) you will often see the generated content set to an empty string i.e. content:"";. Without that empty string there would be no box to style at all.

Yes that’s correct

Yes, when an element overflows its boundaries the overflow is controlled by the css property overflow. The default for overflow is visible which means you can see all the element but any part that is sticking out of its parent’s boundaries is basically not there as far as the browser is concerned. If you use overflow:hidden on that parent you will notice that nothing that follows the element changes in any way except you can no longer see the element that was poking out.

One of the problems with html (in my opinion) is that it is very forgiving of sloppy code. In your example you have put the p tag after the body element and that is not allowed. In order for the browser’s parser to make sense of your document it moves the closing body tag to after your p tag. If you open your developer tools and look at the html it shows you it will show your p tag inside the body.

This is a screenshot from a codepen with your code added (ignore the script tags as that is a codepen addition).

You can see your text is inside the body as far as the browser is concerned.

It’s the same process if you miss a closing tag or don’t provide a correct structure for your lists or table and the browser will try and compensate in the best way it knows how and try to make it all work. Sometimes it gets it horribly wrong and sometimes it gets it horribly right meaning that sloppy coders keep making sloppy mistakes.

It would be better if the html just choked and you knew it was an error before you did anything else. That’s why you should always post your code into the w3c html (and css) validator after you complete every section (and indeed before posting in the forum).

Once again the answer is that your image is poking out of the html element. That image does not take part in the flow as mentioned a number of times now but the browser allows you to scroll to see it. It does not affect the height of any html element. The browser is simply letting you see it but basically it’s sticking out of the viewport. You seem to have got hung up on finding a complex answer to a problem of your own creation .

To put it simply don't let your content overflow unless you have controlled it in some way. This is of paramount importance to responsive design because on a mobile screen any portion that sticks out of the viewport could have an effect of shortening the rest of the content.

torresjit100 · April 10, 2021, 7:29pm

Yes i was saying that content property has to be used otherwise no existence of :: before.

THERE can be two cases

1:The image can overflow only before but inside of p element.
2:OR can overflow both p and before.

means that the text inside para will not follow from the overflowed portion of image but in case of image overflowing only before element but inside p element if it happens , then it will be within body and html tags

Okay. I did not know that we cannot write any text outside of body .

yes that i understood.

PLEASE try to understand what my point was

But i was rather saying that i applied bg color green to body which automatically applied to html element .OK
But if html element has ended just before the height of the full viewport (screenshot given in #8) so isn’t the bg color green should stop right where html has ended!?
how come is it covering beyond the html tag .
Does it naturally also propagate to the whole canvas? something like that??

Its very important to know the reason
Please check the image and the code in post no 3 .
THIS IS due to collapsing margin concept? YES or no?

this image is where I Hovered about ul element which gives the dimension including 40 px padding and shows the top and bottom margin.

BUT,
When SELECTING(not hovering) only the ul element ,
then padding is not included but gives only the blue content region.

I am new to css . I dont know much about padding , border,margin .
But what is happening?

PaulOB · April 10, 2021, 8:44pm

The image is inside the ::before element which has a fixed height. The parent p tag is irrelevant as such and has no height set. The p element will accommodate whatever content it it holds. Therefore inside the p element you have a 10px tall ::before element that is followed by a string of text. Therefore the p element will be 10px tall + the height of the text that follows the :before element. The p element will not suddenly see an image sticking out and contain it because the image is effectively cropped inside the 10px tall :before pseudo element.

Not really. The image that is sticking out of the 10px tall :before element no longer takes part in the flow of the document. It will not affect any other element in the dom. The fact that it may appear to sit inside html or body is irrelevant (and may be a case of the browser just allowing you to see it). The overflow image has no other impact on the document other than its visual appearance. The browser will still allow you to see that overflowing portion but it does not really have an effect on anything else.

Something like that yes. The html element is the :root element (in modern html) and will cover the viewport no matter what height you apply to it. You can see this with a simple test where if you set the html element to height:10px and overflow:hidden the web inspector will show the html element as being 10px high but will not hide the overflow and the background will always cover the viewport. This can be demonstrated in the following screenshot.

The html and body elements are special on html (for obvious reasons) and a background on the html element (or propagated from the body to the html) will always cover the viewport. These are advanced topics that should not really be a concern for beginners and you should cover the basics first. You seemed to have latched on to advanced topics that I guarantee a lot of accomplished coders do not really understand.

Yes basically the extra space at the bottom is the default bottom margin of the p element collapsing onto the bottom of the body element and pushing the html further down. This allows more of the image to show to show. If you set the bottom margin of the p element to zero you will then see the body covers the content as before. Collapsing margins are a whole chapter on their own.

I get the same result as your screenshot when hovering or selecting the element. In your devtools panel of that screenshot it shows the ul selected not just hovered unless I’m mistaken but developer tools do vary between browsers.

By default a ul element has padding and margins applied by default (and this varies between browsers). Older versions of IE used to use margins instead of padding for the space for the markers. You can see in your devtools window what properties are applied to elements although I would steer away from looking at the computed panel until you are more experienced as there are many proprietary browser styles in there that you don’t really want to know about yet and again an extremely advanced topic that wont help you at this stage.

torresjit100 · April 11, 2021, 7:26am

I saw this para in w3.org
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
SO this is equivalent to what u are saying right?

What does “The root element does not paint this background again.” mean?

I saw another para:

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an “HTML” element that has computed values of ‘transparent’ for ‘background-color’ and ‘none’ for ‘background-image’, user agents must instead use the computed value of the background properties from that element’s first HTML “BODY” element child when painting backgrounds for the canvas, and must not paint a background for that child element.
Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

What does it mean?
I understood that when nothing is mentioned , still we see white color in the background of a html document & it shines through the child elements by default because of the initial ‘transparent’ value on ‘background-color’.

No i am sorry . actually when i hover over ul , that image shows and just selecting ul does not show anything other than the box model of the ul element.

Markers means the bullet dots right for ul and numbers or alphabets for ol. So padding is used for that .

No i was saying that back image and back color is targeting both body element . But why does image sits on the top of bg color .
So ,this is a rule :
color always sits on the surface of the body then bg image then any text on the top of image or in body tag. But we can always see the text …wrt to bg-color and bg- image. (there is no specificty here)

PaulOB · April 11, 2021, 10:02am

I think you maybe misunderstanding something if you are talking about your ::before element. The image you inserted via the content property is not a background image it is a foreground image as if it was an image tag.

An image is content just like the text that follows it. Text will not sit on top of an image just like text will not sit on top of text (unless you design it to do that).

Images are inline content just like text fragments. Background images however do sit on the background but you don’t have a background image in your ::before element.

I’ll answer your other questions later when I get back to my desk but you seem to have located the specs anyway which back up my posts.

torresjit100 · April 11, 2021, 10:53am

No i was saying between only the bg-color vs bg - image. THey both target the body element right? but the bg image sits top on of bg-color but not the reverse . What may be the reason

[quote]Image tags are inline content just like text fragments.[/quote] Yes that i understood.

Okay one thing to mention is that bg color Green propagates to html then to viewport .
I see that bg- img named PINK also propagates to html but why does not propagate to the whole viewport (both height and width full)?

PaulOB · April 11, 2021, 12:32pm

Ah ok I see what you are asking

Yes a background-color is always painted first beneath any background images on that element.

A background image for an element will always sit on top of a background color for that same element. If your image had transparent sections then you would see the background underneath. In the case of multiple background images their order of stacking is defined in the specs with the first specified image appearing to be closer to you than subsequent images.

I already answered this question and the reason is that you have set the size of the background using background-size with a percentage value and so the background image only fills 100% of the html element. As seen in your devtools the html element does not fill the whole canvas as such because your overflowing image pokes out of the html element. Background-color however is not affected by background-size as background-size only refers to background images (and linear gradients which are treated as background images).

If you remove the no-repeat and the background-size property the image will once again cover the whole canvas and cover the viewport just like the background-color.

I suggest you run some simpler tests and then refer to this thread and the specs until you get a full understanding.

e.g. Do things like this and see what effect they have.

Then look at the specs and try to ratify that behaviour.

Remember though that html and body are special elements and some of these rules only apply to them.

PaulOB · April 11, 2021, 1:16pm

I think it is just saying don’t do it twice. e.g. Don’t draw the background on the body and then draw it on the root element. Just do it once assuming all relevant criteria are met.

That means that the starting point for the background and its images are the same as the root element. For example if we give the body 100px margins the content of the body is 100px away from the edge but the image is anchored in the top left of the viewport and not top left of the body.

e.g.

torresjit100 · April 11, 2021, 6:13pm

Ok bg image propagates from body to html but not to the whole canvas as i have given bg size in percentage so height:100% means first 100% of body then 100% of html but not then 100% of the canvas height?

In percentage of bg size of the bg images ,we lose the propagation flow from html to canvas unlike the bg color property where propagation is consistent

Another thing , u said in post no 3 screenshot the pink bg images appears beyond body due to collapsing margin .
But what if the pink image can be seen beyond body due to propagation of bg image from body to html .
Because if u see that pic(post no3) then hovering over html element in dev tools it covers the pink image completely.

So is it due to collapsing margin or propagation of bg image from body to pink ?

See html element is covering the bg image pink.

PaulOB · April 11, 2021, 7:58pm

Yes the image is already propagated to the html element. The margin on the p element just pushes the html further down. You can see more of the background because the background size of the html element has increased. The image always was propagated to the html element and if the body had no margins and their were no collapsing margins inside the body then html and body finish in the same place.

The bottom margin on the p element collapses onto the body and pushes the html element further away which is why the inspector shows the background beyond the body. The background is propagated to the html element but as you have set it to background-size:100% 100% then the background does only fills the computed height of the html element as clearly shown in the web inspector. It does not fill the canvas like the background colour does because you have told it to match the html element so there must be some trade off between its use case. If the background always filled the canvas when using background-size then that would render it useless as a true measurement!

We seem to be going around in circles now saying the same things in different ways

What problem are you actually trying to solve here ? Most of these issues (apart from the overflow and collapsing margins) have no real impact in real world applications. The fact that the background on the body is propagated to the html element should serve as no cause for concern and indeed 99% of coders are unaware of this. It’s mainly an internal working of the browser that doesn’t really impact on designs unless you start doing very odd things.

You don’t have control of the canvas as such as it is a place where the rendering takes place.
From here.
For all media, the term canvas describes "the space where the formatting structure is rendered." The canvas is infinite for each dimension of the space, but rendering generally occurs within a finite region of the canvas, established by the user agent according to the target medium. For instance, user agents rendering to a screen generally impose a minimum width and choose an initial width based on the dimensions of the [viewport](https://www.w3.org/Style/css21-updates/CR-CSS21-20040225-20030915-diff/visuren.html#viewport). User agents rendering to a page generally impose width and height constraints.

torresjit100 · April 12, 2021, 7:17pm

I can see the whole image but it is not sticking out of the viewport.
What do u mean by sticking out of viewport?

Okay understood everything.
GENERALLY THE edge of body element is 8px away from the edge of html element.
The pink bg image portion that is a part of the HTML element but not BODY element is hidden beneath the 8px bottom body margin.

I saw this line “The width of the viewport is not always the width of the window”

What is the meaning?
I know there are two viewport visual & layout viewport.

PaulOB · April 12, 2021, 7:58pm

The viewport is basically the browser window which includes scrollbars and browser chrome. The content inside therefore can never be as wide as that measurement but its probably best to read it from the specs.

The content inside the viewport can be wider than the viewport which is why we have scrollbars appear so you can see content that is not within the viewport. For mobile devices the concept of a viewport is far more complex and broadly explained in that link above.

Generally though those issue need not concern you unless you have a specific problem to solve.

Obviously it can’t stick out of the viewport because that would land in your desk. It was just a figure of speech because in the screenshot in post #8 the image at the bottom goes below the ‘fold’ and I just intimated that it was sticking out of the viewport. It is actually below the viewport in that screenshot but overflowing from its parent container.

Unless you have a specific problem to solve I think all points have been covered in this thread now.

Topic		Replies	Views
Body background going through div wrapper HTML & CSS	2	880	October 31, 2010
Hi, new person here HTML & CSS	8	464	October 24, 2010
Html, body <div id="outer> <div id="maincontent> HTML & CSS	4	4877	October 8, 2014
Div tag problems HTML & CSS	10	543	October 8, 2014
Background image is not repeating the length of the page HTML & CSS	1	327	October 4, 2010

Content property

Related topics