Question 263565 in Html Question posted in
Some basic documentation can be found here.

Html – Center background image in table with CSS

<head>
    <style>
        table {
            background-image: url('./elements/pent.png');
            background-size: 100px, 100px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-color: rgba(255, 255, 255, 0.7);
            background-blend-mode: overlay;
            background-position: center center;
            border: 1px solid #b3adad;
            border-collapse: collapse;
            padding: 5px;
        }
        table th {
            border: 1px solid #b3adad;
            padding: 5px;
            color: #313030;
        }
        table td {
            border: 1px solid #b3adad;
            text-align: center;
            padding: 5px;
            color: #313030;
        }
    </style>
</head>
<body>
    <table style="white-space:nowrap">
        <thead>
            <tr>
                <th><br></th>
                <th>Header1</th>
                <th>Header2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row<br></td>
                <td>1</td>
                <td>0.52</td>
            </tr>
            <tr>
                <td>Row</td>
                <td>1</td>
                <td>0.52</td>
            </tr>
            <tr>
                <td>Row</td>
                <td>1</td>
                <td>0.52</td>
            </tr>
            <tr>
                <td>Row</td>
                <td>1</td>
                <td>0.52</td>
            </tr>
            <tr>
                <td>Row</td>
                <td>1</td>
                <td>0.52</td>
            </tr>
            <tr>
                <td>Row</td>
                <td>1</td>
                <td>0.52</td>
            </tr>
            <tr>
                <td>Row</td>
                <td>150</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

This code centers the image in the middle of the window rather than the table itself. So, the position of the image in the background changes when I change the size of the window and is not always in the middle of the table.enter image description here

enter image description here

How can I make this be always centered in respect to the table and not the window?

Tags:

2

Answers


  1. 0 
    ente

    <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            background-image: url('./elements/pent.png');
            background-size: 100px 100px; /* Fix the background-size value */
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-color: rgba(255, 255, 255, 0.7);
            background-blend-mode: overlay;
            border: 1px solid #b3adad;
            border-collapse: collapse;
            padding: 5px;
            width: 100%; /* Make the table cover the entire available width */
            height: 100vh; /* Make the table cover the entire viewport height */
        }
        table th {
            border: 1px solid #b3adad;
            padding: 5px;
            color: #313030;
        }
        table td {
            border: 1px solid #b3adad;
            text-align: center;
            padding: 5px;
            color: #313030;
        }
    </style>
</head>
<body>
    <table style="white-space: nowrap">
        <thead>
            <tr>
                <th><br></th>
                <th>Header1</th>
                <th>Header2</th>
            </tr>
        </thead>
        <tbody>
          
        </tbody>
    </table>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Remove background-attachment: fixed;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search