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
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);
}
CSSHTMLJavaScript
Last Comment
jagguy
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).
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.
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.
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>
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) {
}
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
To change the image you can use: document.getElementById("m
function changeimage(myIMG) {
myELM=document.getElementById(myIMG);
myELMIMG=myELM.src;
myELM.src=myELM.lowsrc;
myELM.lowsrc=myELMIMG;
}
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
O.k. I guessed also a solution for your swap questions, hope both could fit.
ASKER
I posted the solution for others