1

I'm designing a web page that has a photo for a background image of the main page. The image must cover as much of the available window size as possible, whilst maintaining the correct aspect ratio.

To that end, I have a "container" div with the following CSS:

div.background {
    background-image: url('/Content/Images/Home/main-bg.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;    
    float:left;
    width:100%;
}

which is working perfectly.

However, I now need to position additional dom elements at specific places on the image, which are also scaled to the same as background image.

I initially thought that using JQuery and reading the "background-image-x","background-image-y", "background-image-x", "background-position-x", and "background-position-y" CSS properties might give me the information I need to position the additional elements.

However, these are not returning the needed information (for example, image-x and image-y both return "50%").

Is there some nice and simple(ish) way to achieve what I need... or am I going to have to resort to using Javascript and math to manually set the position and size of the background image (thus giving me the answers I need)?

I hate math. Please don't make me use it :)

Sk93
  • 3,676
  • 3
  • 37
  • 67

2 Answers2

3

You could work this out with some quite simple comparative ratios, of the image width vs image height compared to container width vs container height. To work out whether the image will be scaled horizontally or vertically.

img_ratio = img_width / img_height;
container_ratio = $(elm).width() / $(elm).height();

Following that you can work out the offset quite simply as you can work out by what percentage the image has been scaled. And apply that to the opposite mesasurement, and compare it to the container.

if(container_ratio > img_ratio){
    //centered x height 100%
        var scale_percent = $(elm).height() / img_height;
        var scaled_width = img_width * scale_percent;
        var x_offset = ($(elm).width() - scaled_width) / 2;
        offset = [x_offset, 0];
}else{
    //centered y width 100%
        var scale_percent = $(elm).width() / img_width;
        var scaled_height = img_height * scale_percent;
        var y_offset = ($(elm).height() - scaled_height) / 2;
        offset = [0, y_offset];
}

I've wrapped this up in an example fiddle at: http://jsfiddle.net/y2LE4/

Craig Blagg
  • 516
  • 2
  • 4
  • I managed to work out an answer myself last night whilst away from the interwebs.. it's pretty much word for word for what you've given, so I've accepted your reply as the correct answer. Upvoted for the inclusion of an example :) – Sk93 Jan 30 '13 at 09:57
  • Good job on working it through. Appreciate still accepting the answer. – Craig Blagg Jan 30 '13 at 11:28
0

I hope to help.

Try with:

$(document).ready(function(){

var something = background.offset();

 }

or 

$(document).ready(function(){
      var something = $('.background').outerWidth(true);
}

Or just the width feature: http://api.jquery.com/width/

sole
  • 1
  • 2
  • .offset() will return the position of the container div, not the scaled background image for that div. Same goes for .outerWidth(). – Sk93 Jan 30 '13 at 09:56