The âcontentâ property creates a pseudo element and without it there is no content (box generated) that you can style or apply images to. It works hand in hand with :before or :after pseudo elements.
Its like a blank span has been placed on the page.
<span></span>
You donât need any content inside the span if you are going to size it and apply a background image. The same applies to the content property.
{background-size:cover} tells the image to resize to fill the full area of its container. By applying a percentage width that is smaller than the width of the parent container the area covered by the image is reduced. BTW, height: on the container was a âmagic numberâ that happened to work. My bad. In practice, you should not be using {background-size:cover} or {margin:auto} or the width and height properties.
Although it seemed to work, it was bad code. ThereforeâŚ
I would like to make a significant change to the code for the pseudo-element in my modified fiddle post.
The following is more efficient and logical IF one understands how the background properties work. With that understanding in mind, I would like to recommend that you avoid using the background shorthand command. Instead, I recommend that you write out each property so you can see what is happening. The reason for avoiding the shorthand command is to avoid causing problems if you are not aware of the defaults that it applies and to help you learn the properties.
I have made some comments beside these properties to help explain the reason they are used. You can find more information on the web or by asking here. For you I recommend http://www.w3schools.com/cssref/default.asp
Click on a property in the left column to go to the page that describes it.
I strongly suggest that you take advantage of their âPlay Itâ examples to see how properties behave.
My corrected code:
.image:after{
content:""; /* content is required with :before or :after to create the pseudo-element */
position:absolute; /* the pseudo-element is being set to the same size as an ancestoral container with position:relative */
left:0;
top:0;
right:0;
bottom:0;
background-image:url(https://i.imgur.com/HDbLxjZ.png); /* Noted as a memory aid. The arrow image is 257x257 px */
background-repeat:no-repeat; /* The background image should "not repeat". The default is "repeat". */
background-size:64.25% auto; /* The size of the arrow and circle image is this percentage of the width of its parent container. */
background-position:50% 50%; /* The correct way to center the circle and arrow background-image over the blue area is to position it using {background-position:50% 50%}; not by using {margin:auto} in combination with {background-position:cover} and fixed or percent dimensions applied to the image. */
}
So, essentially, {background-size:cover} is the same thing as doing 100% for any image thatâs larger than the background image area. The only difference here is, this deals with only larger images and doesnât blow up smaller images to fit to size.
In this case, we are assuming that the small image is already the desired size that it needs to be to fit over the max sized video box (you calculated the width of the image to be 64.25% of the width of the video box), so we assign that percent width as the background-size width it so it can scale down smaller as the video box scales smaller.
If the total size of the transparent image with the circle and arrow were the same width as the video container, then no percentage adjustment would be needed to make it fit at the correct size over the video box.
Try this CSS with the attached image:
/* Example with wider image */
.image:after {
content:""; /* content is required with :before or :after to create the pseudo-element */
position:absolute; /* the pseudo-element is being set to the same size as an ancestoral container with position:relative */
left:0;
top:0;
right:0;
bottom:0;
background-image:url("dotted-circle-w-arrow-400w.png"); /* Noted as a memory aid. The arrow image is 400x257 px */
background-repeat:no-repeat; /* The background image should "not repeat". The default is "repeat". */
background-position:50% 50%; /* The correct way to center the circle and arrow background-image over the blue area is to position it using {background-position:50% 50%}; not by using {margin:auto} in combination with {background-position:cover} and fixed or percent dimensions applied to the image. */
background-size:contain;
}
Note that I am using {background-size:contain} and that the image is not being resized until the page narrows and the video box narrows.
<observation>
After the vid plays, should the blue overlay reappear over the video box?
