在CSS中使用：after伪元素将background：url图像居中

Question

In CSS, how do I,

1) use an :after pseudo element to successfully insert,

2) a background:url image after some text,

3) that is always centred whenever viewed on a wide large screen or tall small screen?

(Example images below.)

I've tried different things with the code below, but it always aligns the image with the left side of the text, instead of remaining centred as the screen size changes.

Appreciate some help please.

---

Code

div:after { content: ''; background:url("https://ippcdn-ippawards.netdna-ssl.com/wp-content/uploads/2018/07/34-1st-PANORAMA-Mateusz-Piesiak-1.jpg"); width: 1200px; height: 474px; display: block; }

---

Images

Not correct. This is the current result with above code.

Correct. Expected result with centre aligned image on wide large screen.

Correct. Expected result with centre aligned image on tall small screen.

Answer 1

I was able to achieve your desired result by putting the text within a p > span tag, and applying the :after element to the outer p . Then, I gave the span element a max-width and centered it, so that the image appears to overflow the span container. See my solution:

 p:first-of-type:after { content: ''; background:url("https://ippcdn-ippawards.netdna-ssl.com/wp-content/uploads/2018/07/34-1st-PANORAMA-Mateusz-Piesiak-1.jpg"); width: 1200px; height: 474px; display: block; max-width: 100%; margin: 10px 0; } span { display: block; max-width: 70%; margin: 0 auto; } 

 <p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ipsum eget elit egestas ultrices. Sed dui mauris, efficitur sit amet malesuada at, dictum quis elit. Pellentesque ac placerat ante. Nulla augue arcu, blandit quis nulla vitae, posuere gravida neque. Aenean leo erat, porttitor maximus nunc non, mollis ultrices dui. Maecenas consectetur eleifend ligula, quis rutrum leo suscipit id. Morbi pulvinar et est sit amet lacinia.</span></p> <p><span>Nulla vitae magna at mi tempus cursus. Vestibulum purus purus, facilisis a lectus ac, gravida porta tellus. Integer auctor justo at tempus ultricies. Mauris ut eleifend nibh. Nullam fermentum dui in sem congue semper. Quisque eget pharetra enim. Aliquam erat volutpat. Donec nec fringilla augue, sed blandit neque. Aliquam sollicitudin, ante id accumsan fermentum, urna turpis lacinia metus, a ullamcorper enim velit vitae diam.</span></p>