• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Set an image background for html radio with <td>,<tr> or <th>

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
897
Solutions
21
Reaction score
427
Location
Santiago - Chile
Hi! I need some help with html. I started a table with this tags
HTML:
<p class="two">
<center style="font-size: 14px;">
<table border="2" cellspacing="0" cellpadding="0" width="200%">
<tr>
<td>
<center>
<em> <!---------- end of the table --->
<html>  <!---------- radio html start --->
 <head>
 <meta charset="UTF-8">
 <title>Audio player HTML5</title> <!---------- etc.. etc.. etc.. --->

To see like this
bg_radio_1.png


Is there a way to load a background image in the <td> or <th> tag to load a .gif instead of #e1d3c4?
Here's the lines of my .css file that contains the td and tr information.

CSS:
table {
  margin: 10px 0 30px 0;
  width: 100%;
 border-spacing: 1px;
    border-collapse: separate;
}

table tr th{
  background: #31261D;
  color: #FFF;
  padding: 7px 4px;
  text-align: left;
}

tr.yellow td {
  background: #31261D;
  color: #FFF;
  padding: 7px 4px;
  text-align: left;
}
table tr td {
  background: #E1D3C4;
  color: #47433F;
}
table.stripped tr:nth-child(even) td {
  background-color: #afa9a0 ;
}
table.stripped tr:nth-child(odd) td{
  background-color: #E1D3C4;
}
table.TableContent tr td , table.Table3 tr td {
  background: #f1e0c5;
}
table.TableContent tr.LabelH td {
  background: #E1D3C4;
}
.TableContainer table{
  margin: 0 !important;
}
.TableContainer td {
  padding: 2px 3px !important;
}
table tr td img{
  max-width: 520px;
}
input.hover:hover
{
    cursor: pointer;
}

Some ideas, should I create a new "tag" like <td> or <th> on table to load the background image? For example, use <ty> as a parameter coming from table.
How is the proper way to do something like this?. Thanks in advance!
 
Last edited:
Solution
Just add these lines of css to ap-image (line 457)
CSS:
background:url("path/to/your/image.jpg");
background-size:cover;

Remember the image path is related to the css folder. So if the image is located in the parent directory, you must lead with a prefix of "../" to back out of the css folder first

Boy67

Well-Known Member
Joined
Jul 4, 2007
Messages
241
Solutions
11
Reaction score
93
Location
England
It seems like you've messed up the HTML. I cant quite tell if you've added starting tags in the body, or if you've added HTML before starting tags. However, this won't answer your question.

To do so, please can you post the full HTML and CSS files.
 
OP
OP
ralke

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
897
Solutions
21
Reaction score
427
Location
Santiago - Chile
Sure here is the rest

style.css

PHP:
    <title>Audio player HTML5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/AudioPlayer.css">
    <style>

    #player{
        position: relative;
        max-width: 700px;
        height: 300px;
        border: solid 1px gray;
    }
    </style>
  </head>

  <body>
      <!-- Audio player container-->
     <div id='player'></div>

    <!-- Audio player js begin-->
    <script src="js/AudioPlayer.js"></script>

    <script>
        // test image for web notifications
        var iconImage = null;

        AP.init({
            container:'#player',//a string containing one CSS selector
            volume   : 0.7,
            autoPlay : true,
            notification: false,
            playList: [
                {'icon': iconImage, 'title': 'Gimme the Loot - Notorious B.I.G', 'file': 'music/The Notorious BIG  Gimme the Loot Official Audio_64kbps.mp3'},            
                {'icon': iconImage, 'title': 'Rudebwoy - CJ Fly', 'file': 'music/rudebwoy-feat-joey-bada.mp3'}
          ]
        });
    </script>
    <!-- Audio player js end-->

The rest is the close of the tags
HTML:
</p></center></td></tr></em></table>
 
OP
OP
ralke

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
897
Solutions
21
Reaction score
427
Location
Santiago - Chile
Thanks. Can you post the full HTML as a pastebin too
Here is the original code

The idea is to have a background on the space that is generated when the playlist menu is hidden.
Any ideas? Still looking for how to do this! :)
 

Boy67

Well-Known Member
Joined
Jul 4, 2007
Messages
241
Solutions
11
Reaction score
93
Location
England
Just add these lines of css to ap-image (line 457)
CSS:
background:url("path/to/your/image.jpg");
background-size:cover;

Remember the image path is related to the css folder. So if the image is located in the parent directory, you must lead with a prefix of "../" to back out of the css folder first
 
Solution
Top