CSS background image in :after element
A couple things
(a) you cant have both background-color and background, background will always win. in the example below, i combined them through shorthand, but this will produce the color only as a fallback method when the image does not show.
(b) no-scroll does not work, i don't believe it is a valid property of a background-image. try something like fixed:
.button:after {
content: "";
width: 30px;
height: 30px;
background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
I updated your jsFiddle to this and it showed the image.
Background image with pseudo-element in CSS
As Mihai T pointed out, the issue is with width
. I simply removed width
from the first container and it solved the problem.
FINAL SOLUTION
.container {
color: white;
height: 80vh;
margin: 10vh 0 0 25vw;
position: relative;
}
.container::after {
content: "";
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: calc(100% - 4em);
justify-content: center;
padding: 2em;
text-align: center;
width: calc(100% - 4em);
}
.small {
color: #e9e9e9;
font-size: .7em;
}
<div class="container">
<div class="container_inside">
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
<p class="small">Martin Fowler</p>
</div>
</div>
Pseudo-element background image doesn't appear
There were two things to take note of here:
As web-tiki had mentioned in comments, the
width
andheight
of the pseudo-element were set to100%
and the parent element had dimensions of 0px x 0px (because the triangle was generated through border hack). Because of this the actual calculated dimensions of the child (pseudo-element) were also 0px x 0px and hence the image was not showing up. The content did show up when you put plain text because text typically overflows.
The solution to this problem is to assign an explicit height & width to the child pseudo-element (as assigning a height & width to the parent would spoil the border hack).When
background-image
is assigned to a pseudo-element and the size of the image is small compared to the container (pseudo-element), the background image is repeated as many times as possible to fit the container element. This should be avoided by settingbackground-repeat: no-repeat;
and to position the image within the triangle we have to use thebackground-position
property with the appropriate position values in pixels or percentages depending on the needs.
Below is the final snippet (with sample values for height, width & position):
#estatecorner { position: absolute; right: 0px; width: 0; height: 0; border-style: solid; border-width: 0 80px 80px 0; border-color: transparent #67b2e4 transparent transparent;}#estatecorner.house::after { position: absolute; content: ""; width: 80px; height: 80px; background: url("http://i.imgur.com/nceI30v.png"); background-repeat: no-repeat; background-position: 75% 40%;}
<div id="estatecorner" class="house"></div>
put a background image after text
If you want to put it really behind the text you should use pseudoelements:
h1:after { content:url(myimage.png); }
Sample here.
If you want to have a real background image you can only do this if you change the h1
to display:inline
, since otherwise the element will stretch to the full width of its parent, thus losing all reference to the size of the contained text.
All other solutions (including the other ones mentioned here) require changing the HTML markup, and are as such not pure CSS solutions.
Pseudo element not showing background-image
the "display" property. display is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline . A block element is often called a block-level element.
&::before{
content: "";
display: block;/*missing prop*/
background-image: url('/images/theseven/seven_img_old.png');
background-repeat: no-repeat;
position: relative;
height: 817px;
width: 150px;
}
Pseudo element background-image does not work
Try this
h3:before{
background-image: url(https://store.ashenglowgaming.com/wp-content/uploads/2018/02/cropped-agg-store-logo-4-FULLSIZE-1.jpg);
background-size: contain;
background-repeat: no-repeat;
content: '';
height: 110px;
display: block;
}
Related Topics
Flexbox - Align-Self: Flex-End Horizontally
In CSS How to Change Font Size of H1 and H2
Ie11 Flexbox Preventing Text Wrapping
CSS Superscript Registration Trademark
Bootstrap - Some Kind of Margin on Mobile Devices (Only Right Side)
Possible to Build an Svg That Has Fluid Horizontal Scaling, Similar to Old Table-Slice Method
Responsive Web Design and High Resolution Displays (iPhone 4/5)
Spring MVC Where to Put CSS/Js/Img Files
Is There User-Select for Opera 10.62 and IE9
Getting Inline-Block Element's Height to Fill the Parent
How to Use Text-Overflow: Ellipsis on a Button Element
A VS A:Link, What Is the Difference
Refactoring and Removing Unused CSS from SASS/Less Files
Setting Up Auto Compile for Stylus
Sticky Top Div with Absolute Positioning
How to Specify the Maximum Number of Columns Repeat() Will Create Using Auto-Fit/Fill