Can't insert an image in a CSS button from CSS file

Question

In the website I am creating I need a button which has an image (a cross) as background. I use a file *.css for all the graphics of the website, so I'd like to write the button's style in this file.

HTML code

<html>
    <head>
        <title>Prova</title>
        <link rel="stylesheet" href="grafica/style.css" type="text/css">
    </head>

    <body>
        <button id="cookieButton">
    </body>
</html>

CSS

#cookieButton
{
    background-image:url('croce2.png');
    background-repeat: no-repeat;
    background-position: center center;
    width:30px;
    height:30px;
}

this doesn't work, but if I write the same CSS code inline (as in the following code) it works

<html>
    <head>
        <title>Prova</title>
        <link rel="stylesheet" href="grafica/style.css" type="text/css">
    </head>

    <body>
        <button style="background-image:url('croce2.png'); background-repeat: no-repeat;
        background-position: center center; width:30px; height:30px">
    </body>
</html>

This is the result in the first case and in the second case

Why doesn't it work in the first case?

You need close sign in center in the button?

chirag solanki
– chirag solanki

2017-04-29 07:06:10 +00:00
Commented Apr 29, 2017 at 7:06 — chirag solanki
– chirag solanki, Commented Apr 29, 2017 at 7:06
give full path background-image:url('/xx/yy.png'');

rubinmon
– rubinmon

2017-04-29 07:19:58 +00:00
Commented Apr 29, 2017 at 7:19 — rubinmon
– rubinmon, Commented Apr 29, 2017 at 7:19
Thanks @rubin, I've already solved :)

maradev21
– maradev21

2017-04-29 07:24:25 +00:00
Commented Apr 29, 2017 at 7:24 — maradev21
– maradev21, Commented Apr 29, 2017 at 7:24

kmartin · Accepted Answer · 2017-04-29 12:41:16Z

2

You had the problem with the image path because your CSS file was in different directory ("grafica").

So when you tried to load the image in CSS, it couldn't find it, but in HTML (when you used inline style) it had no problems, because the HTML file and image file are in the same place.

edited Apr 29, 2017 at 12:41

answered Apr 29, 2017 at 8:11

kmartin

1943 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maradev21 Over a year ago

Thanks for your answer, but there was a copy of the image in both directories

Arnaud · Accepted Answer · 2017-04-29 07:09:07Z

1

For me, your first code is right. Check my https://jsfiddle.net/10o8zjej/ !

background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Chocolat.png/220px-Chocolat.png');
background-repeat: no-repeat;
background-position: center center;
width:30px;
height:30px;

First, are you sure the path to your .css is right ? Or the path to your croce2.png is also right ?

answered Apr 29, 2017 at 7:09

Arnaud

1013 bronze badges

1 Comment

maradev21 Over a year ago

Yes, I am sure.

chirag solanki · Accepted Answer · 2017-04-29 07:12:13Z

1

HTML (You didn't Put button tag Close)

<html>
    <head>
        <title>Prova</title>
        <link rel="stylesheet" href="grafica/style.css" type="text/css">
    </head>

    <body>
    <button id="cookieButton"></button>
    </body>
</html>

Replace CSS

#cookieButton
{
    background-image:url('http://shrugs.com/img/close_delete.png');
    background-repeat: no-repeat;
    background-position: center center;
    width:30px;
    height:30px;
    background-color:none;
    outline:none;
    border:none;
}

answered Apr 29, 2017 at 7:12

chirag solanki

4073 silver badges8 bronze badges

1 Comment

maradev21 Over a year ago

Ok thanks a lot, now it works. The problem wasn't the button tag, but the image path in the CSS file (I had to write the complete path even if the image is in the same directory of the other files). I still wonder why it doesn't work if I write only the image name (they're in the same directory, it should work)

Collectives™ on Stack Overflow

Can't insert an image in a CSS button from CSS file

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related