The background image on a lengthy HTML table goes missing

Within a table cell, I have around 7500 short text lines.
Interestingly, the background image of the table disappears around the 1800th line.
I'm wondering if there is a specific limit on the length of the table that could be causing this?
Even though the text in the cell remains visible until the end, the background is no longer displayed.
This particular table is identified as #story.

#story{
    margin-top:15px;
    border:medium ridge #FFF;
    border-radius:9px;
    background-image:url(img/back01.jpg);
    }

I've also attempted:

    background: url("img/back01.jpg") repeat; // unfortunately had no effect
    background-color:#FFF; // using this does display color throughout the entire table.
}
htmlcsscss-tables

Answer №1

I can't seem to find the issue you're having:

html:

<table id="story"><tr><td id="content"></td></tr></table>

js:

for(var i=1; i < 3000; i++) {
    var line = document.createElement("div");
    line.innerHTML = "line " + i;
    document.getElementById("content").appendChild(line);
 }

css:

#story{
    margin-top:15px;
    border:medium ridge #FFF;
    border-radius:9px;
    background-image:url(http://www.google.co.uk/images/srpr/logo3w.png);
    }​

You can see it working here.

Answer №2

I ran the same code that palako did and it also worked perfectly for me.

<!doctype html>
<html>
    <head>
        <style type="text/css"> 
        #story{
    margin-top:15px;
    border:medium ridge #FFF;
    border-radius:9px;
    background-image:url(back01.jpg);
    }
        </style>
    </head>
    <body>
        <table id="story"> 
         <?php 
         $z="";
         echo "<tr><td>";
         for($i=0; $i<8000; $i++)
         {
         $z = $z.$i."\n</br>";
         }
        echo $z."</td></tr>";            
         ?>
        </table>
    </body> 
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to effectively manage an overflowing navigation bar

I am currently facing a challenge with the main navigation bar on my website, specifically with how it handles an overflow of links on smaller screen resolutions. I have attempted to adjust the height of the navigation bar at smaller media queries, but I&a ...

phpjqueryhtmlcss

What is the best way to determine the midpoint index of an array?

As a newcomer, I have a question regarding a recent assignment. The task involves creating a global array where objects are imported as they are entered into an input field on the HTML document. The challenge is to update the current list on the document ...

javascripthtmlarraysindexing

IE11 causing issues with CSS 3D animation playback

My experience with this animation in IE11 is not what I expected. I thought it would open like a book. This animation was made using Google Web Designer (I've kept the code short for simplicity). If you want to see how it looks in IE11, click here: ...

cssanimation3dinternet-explorer-11

The issue of HTML form not displaying within a Java servlet environment

While following a basic tutorial to learn Java servlet programming in Eclipse, I encountered an issue with the browser not rendering the submit button in the HTML form. Despite reviewing the code multiple times, making small modifications, and even double- ...

javahtmlxmlservletsforms

Retrieve the data file using input text with jQuery

Is there a way to extract data like this? data:application/pdf;base64,JVBERi0xLjQKJeHp69MKMSAwIG9iago8PC9UeXBlIC9DYXR…AKdHJhaWxlcgo8PC9TaXplIDE4Ci9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjg4MzEzCiUlRU9G from an input file? $('#file').change(functio ...

jqueryhtmlfileinput

Developing a custom mixin to alert a banner at the top of the webpage

I currently have a feature on my website that triggers a pop-up notification whenever a message is received from another user. The pop-up consists of a div displaying the content of the message along with a close button. After exploring various methods to ...

htmlcsscss-transitions

Having trouble with your Bootstrap 4 Dropdown Menu?

I attempted to implement the dropdown menu example from Bootstrap 4, but unfortunately it does not seem to be working as expected. The dropdown menu does not appear when clicked. <li class="nav-item dropdown"> <a class="nav-link dropdown-to ...

javascriptcsshtmlbootstrap-4

Trouble aligning buttons in Internet Explorer with center alignment

Check out this jsFiddle link using Internet Explorer and another major browser: http://jsfiddle.net/6bv7j/1/ Within the jsFiddle, click on the "Add Question" button to see a new row appear below. This row contains two buttons - one labeled "Select All An ...

jqueryhtmlcss

How can I combine an ordinary image and a CSS2D image in THREE.js CSS2DRenderer and save them together as a single .jpg file?

After implementing the following code... (1) I successfully saved regular rendered THREE.js scenes as .jpg files; (2) Additionally, I managed to utilize CSS2DRenderer to display CSS2D labels on top of the canvas; (3) Now, my goal is to save the image wi ...

javascriptcssthree.js

Fleeing from the clutches of the $.ajax({ success: function() }) labyrinth

There is a common scenario where AJAX responses dictate the flow of actions, often leading to nested AJAX responses. However, this results in a clutter of presentation-specific code within the success() callback: $.ajax({ ... success: function ...

javascriptjqueryhtmlajax

Ways to ensure CSS affects icon inside main element?

Struggling to match the background color of Material-UI icons with the rest of the list items on hover. The CSS is not applying to both the icon and text despite styling the overall class (className= "dd-content-item"). Any assistance would be greatly appr ...

javascriptcssreactjsmaterial-ui

Navigating Through Siblings with Http Agility Pack

When it comes to working with the HTML Agility Pack, it's easy to extract descendants and entire tables. However, how can you utilize this tool in a unique situation like the example below? ...Html Code above... <dl> <dt>Location:</dt ...

.nethtmlhtml-agility-packhtml-content-extractionscrape

Unable to locate the sibling element using CSS Selector with Selenium

When using a CSS Selector to click on the next sibling element in Selenium WebDriver, an InvalidSelectorException is thrown. If we consider my DOM structure: <div class="checkbox-group"> <div> <span class="checkbox">::aft ...

cssseleniumselenium-webdrivercss-selectorsautomated-tests

A guide to entering information into an input field with JavaScript for logging in successfully

https://i.stack.imgur.com/TF51Z.gif https://i.stack.imgur.com/HHsax.png https://i.stack.imgur.com/HUztt.png When attempting to input text using document.getelement('').value="" , it doesn't behave as expected. The text disappear ...

javascripthtmljquerycssajax

In JavaScript, when a div element contains an iframe, the click event will not trigger on the div

Check out this sample HTML markup: <div> <iframe></iframe> </div> The iframe is set to fill the outer div. I've added an event handler to the div click event: div.addEventListener("click", function () { console.log( ...

javascripthtmliframe

Updating the chosen value in an HTML select menu dynamically using PHP

I understand that there are existing examples discussing how to dynamically set the selected tag in an HTML option tag. However, I am encountering a complex issue involving break statements and quotations while trying to accomplish this. In my code: whil ...

phphtml

What is the method for displaying a file using a binary string as input?

Is there a way to display a PDF file from a binary string on a web browser? I know that for image files, we can use atob() and then <img src="data:image/png;base64,... But what about PDF files? Is there an equivalent method or syntax like ReadItAs("cont ...

javascripthtmlfilebinaryfiles

Tips for creating two columns within a Bootstrap row, one with a form and the other with an image, that are both the same height and responsive

I am facing an issue with my bootstrap columns. One column has a form, while the other contains an image. The image section is set to 100% width, making it responsive when the screen size changes. However, the form remains at a fixed height regardless of t ...

htmlcsstwitter-bootstrapbootstrap-4

CSS - setting all child elements to the height of the tallest child element

Is there a way to ensure that both fieldsets have the same height as the tallest one? See the code snippet below or visit this link for reference: http://jsfiddle.net/zpcXQ/2/ <div id="parent"> <form> <fieldset id="left"> ...

htmlcss

The storage of HTML5 data is not being saved locally

<html> <head> <title></title> <style type="text/css"> body { font-family: tahoma; } h2 { font-weight: bold; border-bottom: 2px solid gray; margin-bottom: 10px; } #dat ...

javascripthtmllocal-storage