asked on

background image resize

Hi

I have a background image with small images on it.
I need to set the height someway as it is 240px but for a responsive website what do i do here?set %?

How do I get the background to resize

 #heading{
	  height:240px;
	background-image:url(images/head7.png);
 }

Open in new window

Sar1973

In JS you can assign an ID and/or name to an image and then toggle its dimensions with its attributes (see http://www.w3schools.com/html/html_images.asp).

jagguy

ASKER

This doesnt work .
I resize the browser and the background image doesnt also resize, it isnt responsive.
I read you cant do this without css3 which I dont want.

Sar1973

Try this code in W3 schools editor (modified from http://www.w3schools.com/html/html_images.asp) and click on the image:

<!DOCTYPE html>
<html>
<body>

<h2>Norwegian Mountain Trip</h2>
<img ID="myImage" border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228" onclick="myFunction()">

<script>
function myFunction() {
myimg = document.getElementById("myImage");
myimg.style.height = "50%";
myimg.style.width = "50%";
}
</script>

</body>
</html>

Open in new window

Take a look also to http://stackoverflow.com/questions/170624/javascript-image-resize if you want to introduce absolute variable, scale variables, etc.

jagguy

ASKER

no this is not what I want and it wont work anyway with media query

Ok I have a background image (not an regular image on screen see below)
To resize this image or swap it over with another using the below query what do i do?

@media screen and (max-width: 700px) {

}

#heading{
	  height:240px;
	background-image:url(images/head7.png); /////image is set this way
 }

 <div id="heading">
</div

Open in new window

Sar1973

To change the image you can use: document.getElementById("myImage").src="(path)\newImage.jpg"; or use this function using as argument the ID of the image and assigning also the lowsrc property to the alternative image:

function changeimage(myIMG) {
	myELM=document.getElementById(myIMG);
	myELMIMG=myELM.src;
	myELM.src=myELM.lowsrc;
	myELM.lowsrc=myELMIMG;
}

Open in new window

ASKER CERTIFIED SOLUTION

jagguy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sar1973

O.k. I guessed also a solution for your swap questions, hope both could fit.

jagguy

ASKER

I posted the solution for others