Greetings The fact is that in the live preview, or if you just throw the html into the browser, everything is displayed normally, but now I uploaded the page to the server and one element for some reason is not displayed ... I recently learned the frontend and these are my first steps, so do not judge strictly)

not displayed element is in this block:

[class ^ = stil _] {display: block; box-sizing: border-box; background: rgba (160,170,180,1.00); padding: 9px 12px; max-width: 936px; height: 47px; cursor: pointer; margin: 2px auto 0px auto; position: relative; color: rgba (50,70,90,1.00); }

but what exactly is not displayed:

[class^=stil_]::after{ content:""; width:31px; height:24px; background:url(images/strelka.png) no-repeat; float:right; }

Can someone tell me what could be the reason?

  • and if you just follow the link "your site / images / strelka.png the picture opens? - Ivan Ivanov
  • ABOUT! Thank! It turned out that this picture was simply not on the server itself)) Although I threw everything in a crowd ... - Mike

1 answer 1

  1. Check the availability of images on the link. I advise you to use absolute links that start with / . In the browser, open the developer’s toolbar with the F12 key, go to the console tab and see if there are 404 errors there. If there is a red line, then the problem is in the file path.

  2. Check if the sizes of the image exceed the sizes specified in the styles for ::after . Try adding background-size: contain , which means to fit the background in a given container ( read about background )