Div background image does not respect CSS image adjustment rules

Question

Div background image does not respect CSS image adjustment rules

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Good!

I am developing a web page for a personal project, and I have difficulties when I want to add a new function.

The page is simply a table with two cells and a div in each of them. The one on the left is the menu and the one on the right is the information. In the aforementioned div, I try to make the background image change each time I enter, choosing aletoriamente among the 10 backgrounds I have.

The HTML.

<html>
<head>
    <title>Prj</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<script src="scripts/rd_background.js"></script>


    <table border="0" class="master">
            <tbody>
                <td class="left">
                    <div class="dleft">
                        <table border="0" class="slave">
                                <tbody>
                                    <tr>
                                        <td><img src="images/logo-white.png" alt="PIOCAM 2018" style="width:135px;height:130px;" class="logo"></img></td>
                                    </tr>
                                    <tr>
                                        <td class="tdmenu"></td>
                                    </tr>
                                </tbody>
                            </table>
                    </div>
                </td>
                <td class="right">
                    <div class="dright" id="jsBg" >
                    <script type="text/javascript">randBg();</script>
                    </div>
                </td>
            </tbody>
        </table>

</body>

The CSS (I only show the CSS with which JavaScript interacts, the rest has nothing to do with the functionality.).

div.dright {
    border-radius: 8px;
    margin: 2em 2em 2em 2em;
    background: url("images/bg/3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    height: 91vh; 
 }

And the JavaScript.

var bgCount = 10;

function randBg() {
    var num = Math.ceil( Math.random() * bgCount );
    document.getElementById('jsBg').style.background = 'url("images/bg/"+num+".jpg")'; 
}

I have analyzed all the code based on my knowledge, I have searched in google and I still do not understand the problem.

If someone is so kind as to tell me why the image is not changed randomly and correct the fault, I appreciate it. Thanks in advance.

(Update) Fixed problem , but not entirely.

The cause of the problem was in the javascript code:

Before.

'url("images/bg/"+num+".jpg")';

Afterwards.

'url("images/bg/'+num+'.jpg")';

A simple mistake of quotes. Now the solution has generated a problem: the image does not respect background-size: cover; background-repeat: no-repeat; , or background-position: center ; . The image is automatically positioned without respecting those CSS lines.

javascript html css web

asked by spund3 07.09.2017 в 17:19

source

3 answers

PHP activity log Confirmation message phpmailer

score 1 · Answer 1

Data: you have an error when you concatenated the name of the image, remember that the extension of the image must be the same as you define there. (all must be PNG, or all JPG, etc)

<html>
    <head>
      <title>Prj</title>
      <style type="text/css">
        div.dright {
        border-radius: 8px;
        margin: 2em 2em 2em 2em;
        background: url("img/03.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
        height: 91vh; 
        height: 100px;
        width: 100px;
     }
      </style>
    </head>

    <body onload="randBg();">


      <table border="0" class="master">
        <tbody>
          <td class="left">
            <div class="dleft">
              <table border="0" class="slave">
                <tbody>
                  <tr>
                    <td><img src="img/bac_logo.PNG" alt="PIOCAM 2018" style="width:135px;height:130px;" class="logo"></img></td>
                  </tr>
                  <tr>
                    <td class="tdmenu"></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </td>
          <td class="right">
            <div class="dright" id="jsBg" >
            </div>
          </td>
        </tbody>
      </table>

    </body>
    </html>

    <script type="text/javascript">
      var bgCount = 10;

    function randBg() {
        var num = Math.ceil( Math.random() * bgCount );
        document.getElementById('jsBg').style.background = 'url("img/'+num+'.PNG")'; 
    }
    </script>

score 0 · Answer 2

I think that's it: You have to put the script in the head tag, and then in the body tag, put an onLoad="randBg ()":

<html>
<head>
    <title>Prj</title>
    <link rel="stylesheet" href="styles.css">
    <script src="scripts/rd_background.js"></script>
</head>

<body onload="randBg()"> 
    <table border="0" class="master">
            <tbody>
                <td class="left">
                    <div class="dleft">
                        <table border="0" class="slave">
                                <tbody>
                                    <tr>
                                        <td><img src="images/logo-white.png" alt="PIOCAM 2018" style="width:135px;height:130px;" class="logo"></img></td>
                                    </tr>
                                    <tr>
                                        <td class="tdmenu"></td>
                                    </tr>
                                </tbody>
                            </table>
                    </div>
                </td>
                <td class="right">
                    <div class="dright" id="jsBg" >
                    <script type="text/javascript">randBg();</script>
                    </div>
                </td>
            </tbody>
        </table>

</body>

score 0 · Answer 3

Add in the css a width and height for the div and delete background options (they are left over):

div.dright {
  border-radius: 8px;
  margin: 2em 2em 2em 2em;
  opacity: 0.5;
  width:91vh;
  height:91vh;
}

Delete this line from html :

<script type="text/javascript">randBg();</script>

Fix the function randBg() have an apostrophe problem and lack image properties. Add the function randBg(); at the end

function randBg() {
  var num = Math.ceil( Math.random() * bgCount );
  document.getElementById('jsBg').style.background = 'url("images/bg/'+num+'.jpg") no-repeat center';
}
//aqui invocas
randBg();