html css background-image

Question

What's wrong with this code? It doesn't show me anything on the screen:

 <!DOCTYPE HTML>
 <head>
    <title> CSS(lab2) </title>
    <meta charset="UTF-8">
      <style type = "text/css">
        .bg {
         background-image: url("charlesb.jpg");
         background-color: green;
       }
      </style>
 </head>
 <body>
    <div class= "bg">

    </div>
 </body>

set width and height for div.bg (or fill it by text for test) and check the path to image. — Dmitriy
– Dmitriy, Commented Mar 9, 2016 at 20:18
Probably because your <div> is empty and therefore has no height and width. Set it explicitly. — RaminS
– RaminS, Commented Mar 9, 2016 at 20:18

Risinek · Accepted Answer · 2016-03-09 20:37:25Z

1

If you know the size of your background image (e.g. 300x200) you can do this:

 <!DOCTYPE HTML>
 <head>
    <title> CSS(lab2) </title>
    <meta charset="UTF-8">
      <style type = "text/css">
        .bg {
         background-image: url("charlesb.jpg");
         background-color: green;
         width: 300px;
         height: 200px;
       }
      </style>
 </head>
 <body>
    <div class= "bg">

    </div>
 </body>

Simply add width and height statements into your css style.

answered Mar 9, 2016 at 20:37

Risinek

4353 silver badges17 bronze badges

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

Comments

birdoftheday · Accepted Answer · 2016-03-09 21:19:25Z

1

<!DOCTYPE HTML>
 <head>
    <title> CSS(lab2) </title>
    <meta charset="UTF-8">
      <style type = "text/css">
        .bg {
         background-image: url("charlesb.jpg");
         background-color: green;
       }
      </style>
 </head>
 <body>
    <div class= "bg">
It needs something inside the div
    </div>
 </body>

You must have content inside the div to have the background color/image show.

edited Mar 9, 2016 at 21:19

birdoftheday

9248 silver badges13 bronze badges

answered Mar 9, 2016 at 20:20

antipanchi

271 silver badge10 bronze badges

1 Comment

leigero Over a year ago

This is not necessarily true. Your div needs to have dimensions, which are 0,0 by default when the div is empty, but you could just give the div dimensions without giving the div content.

Collectives™ on Stack Overflow

html css background-image

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related