• 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

ralke

(҂ ͠❛ ෴ ͡❛)ᕤ
Joined
Dec 17, 2011
Messages
1,492
Solutions
27
Reaction score
857
Location
Santiago - Chile
GitHub
ralke23
Twitch
ralke23
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
B
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
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
Sure here is the rest

style.css
pastebin.com

style.css - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
pastebin.com pastebin.com

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>
 
Upvote 0 Downvote
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Solution

Similar threads

3221920
  • Question
AAC [HELP] MyAAC Headline not work
Replies
4
Views
481
3221920
3221920
ralke
  • Question
AAC ZnoteAAC show killing assists at characterprofile deathlist
Replies
0
Views
162
ralke
ralke
V
  • Question
AAC reset system geisor
Replies
0
Views
276
vitorelias1
V
blokerzinha
  • Question
Problem with the wrong player appearing as top even though he is not. Znote
Replies
1
Views
323
blokerzinha
blokerzinha
Back
Top