CODEWITHSUNDEEP
csshtmlbackground-imageimage
Asim Siddiqui
Asim Siddiqui

Reputation: 309

Background image of Div not appearing

I am putting an image within a div which has a background image too. But only the image itself is appearing, the background image of the parent div is not appearing.

My code:

  <div id="proceedbody" style="background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg); background-repeat: no-repeat; line-width:810px; line-height: 718px;"><img id="proceed" style="position: absolute; top:200; left:350;" src="http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-matter.png"></div>

Upvotes: 1

Views: 2627

Answers (5)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

There are several problems with the code, but the one that prevents the background from showing is position: absolute. That way, the img element is taken out of the normal flow of the document, leaving nothing inside the div, so its height will be zero.

However, if you set dimensions explicitly for the div, then you can have the img absolutely positioned (though it would probably be better, more robust, to set position: relative on the div, so that img “absolute positioning” will be relative to the div). For dimensioning, use the height and width properties.

The settings top:200; left:350 are ignored by conforming browsers. Use top:200px; left:350px instead.

Upvotes: 0

user799910
user799910

Reputation:

All you need to do is change "line-width" and "line-height" to "height" and "width" and also add: background-size:100% 100%; to #proceedbody

<div id="proceedbody" style="background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg); background-repeat: no-repeat; width:810px; height: 718px; background-size:100% 100%;"><img id="proceed" style="position: absolute; top:200; left:350;" src="http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-matter.png"></div>

Link to jsFiddle: http://jsfiddle.net/justinc535/cSrQL/

Upvotes: 0

32bitfloat
32bitfloat

Reputation: 771

You have to set a height (and width) to the outer div or it'll be only as high as the image is. Because the image in img-tag is semitransparent in its borders and web cannot show semitransparence, the full outer div is covered by the image.

edit: set your inner image as background-image to an inner div could be a better way:

#proceedbody{
  background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg);
  height: 810px;
}

#inside{
  background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-matter.png) no-repeat left top transparent;
  height: 276px;
}

    <div id="proceedbody">
    <div id="inside"></div>​
    </div>

Upvotes: 0

Brant
Brant

Reputation: 1788

You're using line-height and line-width instead of width and height in your inline styling of the div...

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

<div id="proceedbody" style="width:810px; height:718px; background: url(http://www.asifsinan.com/wp-content/uploads/2012/07/please-proceed-image.jpg) no-repeat 0 0;">

Upvotes: 1

Related Questions