How to get reference to image "background="background-image-01.jpg"?"

Hello & Thanks ;
I am making great headway with this Authoring page , BUT:
I am trying to display full image , but browser only shows partial , unless screen is shrunk as small as possible :

<body id="Bodie"  onload="resizeImage()" background="background-image-01.jpg">

But I don’t know how to get reference to ( background=“background-image-01.jpg” ) .

I tried this:
targetBody.setAttribute(“background.img.width” , bodyWidth ) ;
targetBody.setAttribute(“background.img.height” , bodyHeight ) ;
Strangely enough I didn’t get any errors on it :slight_smile: .

No probs with this though :
targetBody.setAttribute(“width” , bodyWidth ) ;
targetBody.setAttribute(“height” , bodyHeight ) ;

Here is my code :

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
<style>        
  body {
         font-family: Comic Sans MS;
		 background-repeat: no-repeat;
		 background-size: cover;
		 backgroundSize = "contain contain";
/*
		 background: url(background-image.jpg) ;
         background-repeat: no-repeat;
*/
	}
.buttonPos {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
</style>
<script> </script>
<body id="Bodie"  onload="resizeImage()" background="background-image-01.jpg">
<!--    <body onload="documentURL()">  --> 
<br>
<script>
var bodyWidth ; var bodyHeight ; var imageWidth ; var imageHeight ; var img ; 
window.addEventListener("resize", resizeImage());

function resizeImage() { 
 alert("function resizeImage() {")

var targetBody = document.getElementById("Bodie"); 
// alert(targetBody) ;

bodyWidth  = window.outerWidth  ;
//alert("bodyWidth = " + bodyWidth + "    window.outerWidth = " + window.outerWidth ) ;
bodyHeight = window.outerHeight ;

targetBody.setAttribute("width" , bodyWidth )  ; 
targetBody.setAttribute("height" , bodyHeight )  ; 
targetBody.setAttribute("background.img.width" , bodyWidth )  ; 
targetBody.setAttribute("background.img.height" , bodyHeight )  ; 

alert( 'bodyWidth  = ' + bodyWidth  +  "    bodyHeight = " + bodyHeight) ; 

} 
</script>
<script language="javascript">
    var imageCount = 0 ; var nextImage = "background-image-01.jpg" ;
    var targetBg = document.getElementById("Bodie"); 
function changeImage() {
    imageCount = imageCount + 1 ;
    elem = document.getElementById("myImage");   // element.style.backgroundColor = "red";
    if (imageCount == 1) { if (targetBg.hasAttribute("background")) {       
        targetBg.setAttribute("background", "background-image-02.jpg"); } }
    if (imageCount == 2) { if (targetBg.hasAttribute("background")) {       
        targetBg.setAttribute("background", "background-image-03.jpg"); } }
    if (imageCount == 3) { if (targetBg.hasAttribute("background")) {       
        targetBg.setAttribute("background", "background-image-04.jpg"); } }
    if (imageCount == 4) { if (targetBg.hasAttribute("background")) {       
        targetBg.setAttribute("background", "background-image-05.jpg"); } }
    if (imageCount == 5) { if (targetBg.hasAttribute("background")) {       
        targetBg.setAttribute("background", "background-image-01.jpg"); } }
	if (imageCount == 5)  { imageCount = 0;}
  }
</script>
    <input type="button" class="buttonPos" onclick="changeImage()" value="Change Image">
</body>
</html>

Thanks

The background attribute only accepts an image, and cannot set the size of that image. That’s why it’s deprecated.

The much better way is to use CSS to set the background image and size and other properties instead.
That’s easily achieved by setting a class name on the body, and using CSS to specify what occurs with that class name.

2 Likes

Or, since you’re just trying to set a background image to… what i assume is stretch… forget all of it and just tell your css to do just that.

body { background-size: cover }

will do the job already.

Thanks m_hutley ,
Sorry to say , that doesn’t do the trick .
Could be I miss-coded something , see live here:
http://vmars.us/ShowMe/changeImage-WIP-background-cover.html
Thanks

Thanks Paul_Wilkins ,

Will do , but will take me a while to re-code this:

var imageCount = 0 ; var nextImage = "background-image-01.jpg" ;
var targetBg = document.getElementById("bodyId"); 

function changeImage() {
imageCount = imageCount + 1 ;
elem = document.getElementById(“myImage”); // element.style.backgroundColor = “red”;
if (imageCount == 1) { if (targetBg.hasAttribute(“background”)) {
targetBg.setAttribute(“background”, “background-image-02.jpg”); } }
if (imageCount == 2) { if (targetBg.hasAttribute(“background”)) {
targetBg.setAttribute(“background”, “background-image-03.jpg”); } }
if (imageCount == 3) { if (targetBg.hasAttribute(“background”)) {
targetBg.setAttribute(“background”, “background-image-04.jpg”); } }
if (imageCount == 4) { if (targetBg.hasAttribute(“background”)) {
targetBg.setAttribute(“background”, “background-image-05.jpg”); } }
if (imageCount == 5) { if (targetBg.hasAttribute(“background”)) {
targetBg.setAttribute(“background”, “background-image-01.jpg”); } }
if (imageCount == 5) { imageCount = 0;}
}
Thanks

Well, for starters, streamline.

if (imageCount == 1) { if (targetBg.hasAttribute("background")) {       
    targetBg.setAttribute("background", "background-image-02.jpg"); } }
if (imageCount == 2) { if (targetBg.hasAttribute("background")) {       
    targetBg.setAttribute("background", "background-image-03.jpg"); } }
if (imageCount == 3) { if (targetBg.hasAttribute("background")) {       
    targetBg.setAttribute("background", "background-image-04.jpg"); } }
if (imageCount == 4) { if (targetBg.hasAttribute("background")) {       
    targetBg.setAttribute("background", "background-image-05.jpg"); } }
if (imageCount == 5) { if (targetBg.hasAttribute("background")) {       
    targetBg.setAttribute("background", "background-image-01.jpg"); } }
if (imageCount == 5)  { imageCount = 0;}

=>

if (targetBg.hasAttribute("background")) {
   targetBg.setAttribute("background","background-image-0"+((imageCount % 5)+1)+".jpg");
}

(Programmer’s Mantra: If i’m typing the same thing repeatedly, I’m doing it wrong.)

Very cool , its new to me , so I made this to study results:

<!DOCTYPE html>
<html>
<head>
<style>
/*

*/
</style>
</head>
<body>

<h5>Access Two Number fields and calculate their modulo/modulus :</h5>
Enter Values for "xModuloResult = yValue % zModuloInput" : 
<br><br>
Enter yValue : <input type="number" id="yValue" value="5">
<br>
Enter zModuloInput : <input type="number" id="zModuloInput" value="5">
<br>
<p>Click Button to Get xModuloResult  :)</p>

<button onclick="calcModulo()">Get xModuloResult</button>
<div>
<p id="demo1">demo1</p><p id="demo2">demo2</p><p id="demo3">demo3</p>
</div>

<script>
  var yValue ;  var xModuloResult =0 ;  var zModuloInput ;  var getNum;
function calcModulo() {
  yValue = document.getElementById("yValue").value;
  zModuloInput = document.getElementById("zModuloInput").value;
  
  xModuloResult = yValue % zModuloInput ;

  getNum  = document.getElementById("yValue").value;
  document.getElementById("demo1").innerHTML = getNum; 
  getNum  = document.getElementById("zModuloInput").value;
  document.getElementById("demo2").innerHTML = getNum; 
  document.getElementById("demo3").innerHTML = xModuloResult; 
}
</script>

</body>
</html>

Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.