Get Dimensions of background Image of div in HTML using Jquery or Javascript

Question

enter image description here

AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.

I have tried jquery to get width and height of the background image but it gives out 0,0.

What should I do.

jsfiddle code jsfiddle[dot]net/AFvak/

can you make a fiddle out of your question, http://jsfiddle.net — Dakait, Feb 15 '13 at 06:58

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.

See: How do I get background image size in jQuery?

edited May 23 '17 at 12:12

Community

1
1

answered Feb 15 '13 at 07:01

Alexis Beingessner

469
3
6

Barnee · Answer 2 · 2013-02-15T08:11:47.073

1

If the center div should always be centered with a fix height and width then you could try this:

<div class="wrapper">
   <div class="inside"></div>
</div>

Styles:

.wrapper {
   width: 600px;
   height: 500px;
   margin: 40px auto 0;
   position: relative;
   border: 1px solid black;
   background: url(image_here.jpg) no-repeat center center;
}

.inside {
   top: 50%;
   left: 50%;
   width: 200px;
   height: 100px;
   margin-top: -50px; /* height/2 */
   margin-left: -100px; /* width/2 */
   position: absolute;
   background: #000;
}

DEMO

edited Feb 15 '13 at 08:11

answered Feb 15 '13 at 08:05

Barnee

3,212
8
41
53

@tehTerminator add in the `div2` all the classes that I've wrote for the `inside`. Off course you'll have to change the `width`, `height` and the `margins`. – Barnee Feb 15 '13 at 10:40

score 0 · Answer 3 · answered Feb 15 '13 at 06:58

0

try ..

$backWidth=$(window).width();
$backHeight=$(window).height();

answered Feb 15 '13 at 06:58

bipen

36,319
9
49
62

score 0 · Answer 4 · answered Feb 15 '13 at 07:49

As per my understanding you try to div tag should be on image with fixed position even browser will resized.

Here code:

<div id="wrapper">
             <div id="test">
                   <img src="test.jpg" id="yourimg">
                   <div id="yourdiv"></div>
             <div>
        </div>





<style>
               #test{
                     position:relative;
               }
               #yourimg{
                     position:absolute;
                     top:100px;
                     left:100px;                  
               }
               #yourdiv{
                     position:absolute;
                     top:120px;
                     left:120px;                  
               }
         </style>

Get Dimensions of background Image of div in HTML using Jquery or Javascript

4 Answers4