Background-Image Doesn't Appear If <Div> Is Empty

background-image doesn't appear if div is empty?

Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.

.bordertop 
{
    background-image: url(../images/top_border.png);
    background-repeat: repeat-x;    
    height: 100px;
    width: 100%; /* may not be necessary */
}

Background-image inside div not showing up

#topImage doesn't have a height set, and no elements inside it which would give it a height.

#topImage
{
  position:absolute;
  background-image:url("images/Top-Banner.gif");
  background-repeat:repeat-x;
  width:100%;
  height: 100px; /* Change to the height you need */
  top:0px;
  left:0px;
}

Or just stick an img tag inside the div instead of using background-image, that would work as well.

Getting a background image to display in a blank div element

Give this a shot!

one | <span style="padding-left: 20px; background: url('16x16-image.gif') no-repeat; height: 16px">two</span> | three

If you use a div instead of span, you'll need to set display: inline in the style as well.

Div with height 0px so not showing background img

Apply a height and width to .home-inner and make sure that your url has quotations '' surrounding your image path. You can also customize the background-image using background properties.

.home-inner {
    height: 100vh;
    width: 100vw;
    background-image: url('../img/bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

Greetings from Canada!

Using image as background in empty div to cover entire area in a responsive web app

On the .left div use following CSS:

position: fixed;
width: 100vw;
height: 100vh;
z-index: -999;
top: 0;
left: 0;

And delete the max-width.

Adding a background to an empty div - specifying the height impossible

You can set a background image with css and then have it cover the available space like:

.top-left {
  background:url('/images/image-name.jpg') no-repeat;
  background-size:cover;
  background-position:center;
}

This will work as long as you have the height set. If you can not figure out how to set the height to equal the div next to it you can do that with Jquery like so:

$(function() {    
  var topRight = $('.top-right').height();
  $('.top-left').height(topRight);
});

As always make sure Jquery is loaded prior to including the above code.

Div with background image and no content not displaying

You need to specify a size:

<div style="width: 100px; height: 100px"></div>

You can set the size to the dimensions of your background image, or any other values you desire.

---

Related Topics