css background-image not working properly

2019-05-21 10:07发布

问题:

i use exact this code:

body
{
background-image:url('gradient2.png');
}

found on w3 school its simple i got the pic in same folder, i did everything and i dont know why i cant insert images in css. The html tag is working. I had the same problem 3-4 months ago, and now working again with html and still, not working. The pic just wont show.

this is my full css:

*
{
    margin: 0;
    padding: 0; 
}

body
{
        background: url("pagebg2.jpg") repeat left top;    
    font: normal 10pt Arial,Helvetica,sans-serif;

}

#center{
    box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 1);
    border: 3px solid rgba(0, 0, 0,0.8);
    background-color:#50649d;
    border-radius: 20px 20px;
    width: 650px;
    height:900px;
    margin: 0 auto;

}
#pic {
     text-align:center;
}
img {
    box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 1);
    border: 3px solid rgba(0, 0, 0,0.8);
    border-radius: 20px 20px;
}

and this is the html:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="CSS/btstyle.css">
        <title></title>
    </head>
    <body>
        <header>this is the title</header>
        <div id="container">
                <div id="pic" class="column">
                <img src="opel.png" />


                </div>


                <div id="center" class="column">

                  center
                </div>
        </div>
        <footer class="foot"><p>©WebMaster pr.toma@gmail.com</p></footer>
    </body>
</html>

回答1:

Your code is perfect. I tested it on jsFiddle. The problem is with your image URL

Check this out: jsFiddle link

body
{
    background: url("http://jsfiddle.net/img/logo.png") repeat left top;    
    font: normal 10pt Arial,Helvetica,sans-serif;

}

Here, i only change the image url.



回答2:

I would have commented to @MohitPandey but I need 50 reputation, therefore I'll add it here. When you are providing direct URL's it is always better to remove the 'http' or else there will be security warnings when you are displaying content on a secure page. So modify it as follows.

body
{
    background: url("//jsfiddle.net/img/logo.png") repeat left top;    
    font: normal 10pt Arial,Helvetica,sans-serif;
}

I learnt this from HTML5Boilerplate. Hope it helps!



回答3:

The error is in your body STYLING...

.Body
{
  background-image: url('pagebg2.jpg');
  background-repeat: repeat;
  background-position: left top;
  font-family: Arial;
  font-size: 10pt;
}

Try the above...