background-image: url() not showing up

user_13788409 0
Viewed 115

I'm familiar with html/css, but while experimenting with background-image:url(), nothing shows up. My html is very basic to test this out; my image path name is correct. I've exhausted all my resources and nothing is working. Here is my html:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="test.css"/>
    </head>
        <body>
            <img class="pic">
        </body>
</html>

CSS:

.pic {
    background-image: url(/Users/leslienguyen/Desktop/bgBullet4.png);
    background-size: cover;
}

I've already tried using (-webkit-)background-size, background-attachment, and checked if the files are all in the same location. The background sometimes works when I put height specific px but never works with auto either. I'm super stuck.

Thanks!

background-image css html
4 Answers

You must have a width height for your pic. I used a random image below for the purposes of running the code.

    .pic {
        width:100%;
        height:100vh;
        background-image: url('https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg');
       background-size: cover;
    }
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="test.css"/>
    </head>
        <body>
            <img class="pic">
        </body>
</html>

user_70394930

you are trying to add a background image to an image tag <img /> ! this is not how the img tag works

You can insert an image by using the src attribute

<img src='/Users/leslienguyen/Desktop/bgBullet4.png' />

Or set the background to your body by simply moving the class='pic' to the body tag

<body class='pic'>
</body>
user_105645250

Try to add '' '' before and after your url adress.

user_139785550

Try inserting your PNG File into Imgur, and then embedding the imgur link into the code, so do

.pic {
    background-image: url((IMGUR URL.png);
    background-size: cover;
}

user_136212430
Related