How can I set one image element as background image of another div using javascript
Question
Can anybody solve my problem regarding javascript.I am explaining my story and also providing the code snippets below.
Story:
Actually I have one image which is a big size/any size and i want to fix it as background image of another div which size(dimension-300*190) is fixed.The image should not loose its quality and need to display properly.I have written some code but unable to fix it as background image.Please help me to solve this issue by seeing my code which has provided below.
My code snippets:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image path</title>
<style>
.main{
height:190px;
width:300px;
border:#00F 2px solid;
border-radius:8px;
}
</style>
</head>
<body>
<div class="main" id="img"></div><br />
<div>
<button type="button" id="btn">ADD</button>
</div>
<script>
document.getElementById('btn').onclick=function(){
var rootImage=getProperImage("../../manju_w5call.jpg");
console.log('proper',rootImage);
var string="url('"+rootImage+"')";
document.getElementById('img').style.backgroundImage=string;
}
function getProperImage(image){
console.log('actualy iamge',image);
var curH;
var curW;
var myImage=new Image();
myImage.src=image;
function uploadImage(){
myImage.onload=function(){
curH=myImage.height;
curW=myImage.width;
console.log('height and width',curH,curW);
var newSize = scaleSize(300, 190, curW, curH);
this.setAttribute("src", "../../manju_w5call.jpg");
this.setAttribute("height", newSize[1]);
this.setAttribute("width", newSize[0]);
console.log(myImage.src,myImage.width);
}
return myImage;
}
var text=uploadImage();
console.log('text',text);
return text
}
function scaleSize(maxW, maxH, currW, currH){
console.log('scale');
var ratio = currH / currW;
console.log('The ratio is',ratio);
if(currW >= maxW && ratio <= 1){
currW = maxW;
currH = (currW * ratio)+19;
}else if(currH >= maxH){
currH = maxH;
currW = currH / ratio;
}
return [currW, currH];
}
</script>
</body>
</html>
I cannot get the proper image here.Please help me to re size the image without losing its quality and display as background image properly.
2 answers
solution1
0 2015-02-03 11:51:16
As it's a background image it shouldn't be separate from the div
Set the image in CSS as the background-image and assign the background-size attribute of cover
solution2
0 2015-02-03 13:10:48
#container { position : relative; } #background { position : absolute; color : white; } #content { position : absolute; }
<div id="container"> <img id="background" src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg" alt=" " /> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at enim mollis, imperdiet urna at, tincidunt massa. Cras efficitur, metus vitae fermentum ultrices, neque enim egestas purus, id blandit orci est vitae quam. Duis auctor neque bibendum neque accumsan, nec aliquam velit consequat. Morbi convallis sem libero. Mauris facilisis pretium elit non mollis. Mauris tempor tristique efficitur. Mauris augue erat, elementum nec blandit ac, tempus et velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed mollis dolor vitae purus efficitur, eu imperdiet justo feugiat. Morbi turpis purus, sollicitudin non hendrerit vitae, placerat eu eros. Nullam efficitur, diam fringilla auctor fringilla, mi est consequat erat, nec ornare orci quam iaculis mi. Ut at sollicitudin dolor, a bibendum risus. </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.