Question 169598 in CSS Question posted in
Some basic documentation can be found here.

why isn’t css background image loading in list?

I’m trying to load a background image with a "before" tag into a list to create a checkmark image at the back of the list, but the images aren’t showing up. What is the problem? Here is the code:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
   


    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="stylize">
            стилизируй с помощью псевдоклассов и псевдоэлементов
        </div>
        <div class="mainlist">
            <ul class="list1">
                <li>Put on this page information about your product</li>
                <li>A detailed description of your product</li>
                <li>Tell us about the advantage and merits</li>
                <li>associate the page with the payment system</li>
            </ul>
            <ul class="list2"></ul>
        </div>
    </div>
</body>
</html>

and css:

.list1 li:before{
    content: '';
    background: url('../img/Без названия.png') 0 0 no-repeat;
    width: 20px;
    height: 20px;

In theory, the list should be marked with checkmarks, or rather with images that I uploaded using the "background url", but no icons appear

Tags:

2

Answers


  1. 0

    .list1{list-style: url(‘img/Без/названия.png’);}

    Or

    Change backslash to ‘/’ after img/Без

    Login or Signup to reply.
  2. 0

    There may be a few potential issues with your code that prevent the background images from appearing. Here are some suggestions to fix this.

    1. File path: Ensure that the file path to the background image is correct. Double-check that the path '../img/Без названия.png' is pointing to the correct location and that the image file exists at that path.

    2. Special characters in the file name: The file name 'Без названия.png' contains special characters and spaces. Make sure that the file name is correctly encoded in the URL. Instead of using backslashes to escape the space, you can use %20. For example, 'Без%20названия.png'.

    3. Image visibility: Check if the image is actually visible by setting a background color for the :before pseudo-element. Add background-color: red; to your CSS rule and see if a red box appears instead of the image. This can help determine if the issue is with the image itself or its visibility.

    4. CSS selector specificity: Verify that the CSS selector you are using to target the :before pseudo-element is specific enough to apply the background image. If there are other CSS rules overriding or conflicting with this selector, the background image may not be displayed. You can try adding a higher specificity to the selector, such as .list1 li:before, or using the !important declaration.

    5. Check for errors: Ensure that there are no errors in your CSS file. If there are any syntax errors or missing closing brackets in your CSS, it could prevent the styles from being applied correctly.

    By reviewing and addressing these potential issues, you should be able to determine why the background images are not showing up in your list.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search