Update
Change the width by holding the boxes in place with an opaque background
You can set the background image directly to the element and define the background-width set to cover to proportionally cover the background image.
However, this does not project any child element tied to a specific position.
In addition, you cannot set a separate opacity for the background image. You need to install it on the element to which the image is attached, which means that it will also affect child elements.
To solve this problem, you can:
- Edit the image and save it with the desired opacity as PNG.
- You can change the opacity using the canvas (see solution below)
- Or you can use an image element as a child of that element. This last one is quite effective for this case (and more effective than using the canvas).
Here is a simple but effective solution (there are problems in Firefox, because this browser does not support the required CSS property at the moment, but a possible option is provided).
HTML:
Small restructuring of the html code:
<div id="container"> <img src="http://kpv.s3.amazonaws.com/static/img/film.jpg" width="794" height="477" /> <div class="box-message flow_one">Ipsum lorem dummy text. <br>Ipsum lorem dummy text. <br>Ipsum lorem dummy text. <br> </div> <div class="box-message flow_two">Ipsum lorem dummy text. <br>Ipsum lorem dummy text. <br>Ipsum lorem dummy text. <br> </div> </div>
CSS
html, body { width:100%; height:100%; margin:0; padding:0; } #container { position:relative; width:794; height:477; } #container > img { width:100%; height:auto; opacity:0.5; } .box-message { position:absolute; border:2px solid #000; border-radius:7px; background:rgba(255, 255, 255, 0.85); padding:7px; } .flow_one { left:12%; top:10%; } .flow_two { left:50%; top:42%; }
(The only reason the image is separate is to allow different opacity for the children elements.)
Extra tip: if you need to have different font sizes relative to the device screen, you can override font-size with @media queries.
JavaScript:
We need a small snippet with JavaScript to calculate the ratio of the width compared to the width of the image / background.
This relation is then used for the zoom property for the CSS rule, which we set programmatically, since it will scale the parent element and everything in it (for Firefox we need to use transform:scale(f) , however this has problems, it seems to accumulate with the current width background).
/// init parent element at load redraw(); /// call everytime we resize window.onresize = redraw; /// calc ratio for zoom function redraw() { /// ratio f = window width / background width (hard-coded for demo) var f = window.innerWidth / 794; //FF: container.style.transform = 'scale(' + f + ')'; container.style.zoom = f.toFixed(2); }
ONLINE DEMO HERE (for Chrome and other browsers that support CSS zoom )
Update 2
No matter how you twist and turn things, you will encounter compatibility issues with this approach, as well as the CSS approach. One browser supports one thing, another browser - one more thing, but not the first, etc. They are not yet.
A more robust approach (looking away from older IE browsers) is to perform manual calculation of element positions, size, font, etc. using pure JavaScript or a wrapper such as jQuery.
You can check whether the browser is able to use, for example, scaling, for example, as follows:
if (typeof container.style.zoom === 'undefined') {
Of course, the calculation part is more tedious than shown here, since you need to iterate over the elements, etc. in a way that suits your final decision.
Opacity
If a single image element or background image (predefined opacity) is an option, then this solution provides an option for this. Please note that this is not very effective in this case with resizing, but may be the last solution.
Here is an example of using canvas:
var img = document.createElement('img'), canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), opacity = 0.5; /// when image has loaded and a resize event occured img.onload = window.onresize = draw; /// resize canvas and draw image at given opacity function draw() { /// set canvas = window client size canvas.width = window.innerWidth; canvas.height = window.innerHeight; /// set opacity of canvas ctx.globalAlpha = opacity; /// draw image to canvas size ctx.drawImage(img, 0, 0, canvas.width, canvas.height); /// set background to resized image container.style.background = 'url(' + canvas.toDataURL() + ') no-repeat left top'; } /// request cross-origin sharing (if different domain than page) img.crossOrigin = 'anonymous'; /// set image source and start loading image img.src = 'http://i.imgur.com/Y77lhhL.jpg';
ONLINE DEMO HERE
Notes. To do this, you need to comply with the CORS (cross-source sharing) requirements. This means that the image is downloaded from some source (domain, path) - or - if downloaded from another source, that the server allows sharing.
You can see for a demonstration of the script that the source link for the image you provided will not work with this approach, so I moved the image to imgur.com, which allows cross-sharing to work and it works.