Tablepress – background image in table cell

Hi,

thanks for your post, and sorry for the trouble.

You can basically use the code from the TablePress FAQ question at https://tablepress.org/faq/highlight-cells-or-content/ , but instead of using the background-color CSS property you would use a background image like

background-image: url(image.jpg);

Regards,
Tobias

Thanks Tobias! I have come a little closer to want I want
Please check: https://www.elmarkonline.net/?page_id=489

want I would like to have is this:
https://www.imgdumper.nl/uploads7/5360fd9a3a895/5360fd9a3a4ca-desired-table-layout-1.JPG

The custom css now looks like this:

.tablepress-id-1 .row-1 td {
background-image: url(https://www.elmarkonline.net/wp-content/uploads/2014/03/background-bluegray-1.jpg);
}

.tablepress-id-1 .row-2 .column-3 {
background-color: #ff0000;
}

.tablepress-id-1 .row-2 td {
background-image: url(https://www.elmarkonline.net/wp-content/uploads/2014/03/background-bluegray-1.jpg);
}

When you load the page, you see the red color flashing, but is overruled by the repeating background image.

Suggestions are welcome!

Hi,

I don’t really see what the problem is. The red color is of course overruled by the image once it has finished loading. What else do you expect here?

Regards,
Tobias

I don’t know what to expect here, that’s why I asked you ??

But now I finally solved it! Even the different background images for each cell!

Hats off to this very good tool!!

Best regards,
Elmer

Hi Elmer,

ah, ok ?? Good to hear that everything is working now!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Hi there Tobias,

Agreed, Tablepress is a great plugin you’ve developed.

I’m trying to do the same thing, and while I think it might be my website theme overriding the Tablepress plugin, I just wanted to make sure before I give up on trying to be fancy.

I’m trying to make a banner and in the shaded area post a title. The banner would serve as a link to another page. (Does that make sense?) Here’s what it looks like so far.. https://animeartmuseum.org/artist-page-categories (without any links yet)

At the top is what I have tried accomplishing with Tablepress and I input this code:

.tablepress-id-43 tbody td {
	font-family: Tahoma;
	font-size: 18px;
	color: #ffffff;
}

.tablepress-id-43 .row-1 .column-A {
	background-image: url(https://animeartmuseum.org/wp-content/uploads/2015/01/Animators.png);
}

.tablepress-id-43 .row-2 .column-A {
	background-image: url(https://animeartmuseum.org/wp-content/uploads/2015/01/Cosplayers.png);
}

.tablepress-id-43 .row-3 .column-A {
	background-image: url(https://animeartmuseum.org/wp-content/uploads/2015/01/Crafters.png);
}

.tablepress-id-43 .row-4 .column-A {
	background-image: url(https://animeartmuseum.org/wp-content/uploads/2015/01/Illustrators.png);
}

.tablepress-id-43 .row-5 .column-A {
	background-image: url(https://animeartmuseum.org/wp-content/uploads/2015/01/Sculptors.png);
}

.tablepress-id-43 .row-6 .column-A {
	background-image: url(https://animeartmuseum.org/wp-content/uploads/2015/01/Singers.png);
}

.tablepress-id-43 .row-7 .column-A {
	background-image: url(https://animeartmuseum.org/wp-content/uploads/2015/01/Videogames.png);
}

.tablepress-id-43 .row-8 .column-A {
	background-image: url(https://animeartmuseum.org/wp-content/uploads/2015/01/VoiceActors.png);
}

.tablepress-id-43 .row-9 .column-A {
	background-image: url(https://animeartmuseum.org/wp-content/uploads/2015/01/Writers.png);
}

And below that is what I tried to accomplish with basic table html code (which looks like this.

I appreciate any assistance on the matter!

Take care,

Carmen

Hi Carmen,

thanks for your question, and sorry for the trouble.

There’s just a small error in your code. Instead of using .column-A, the correct CSS class name is .column-1 here. So just change all the

.tablepress-id-43 .row-... .column-A {

to

.tablepress-id-43 .row-... .column-1 {

Regards,
Tobias

Tobias! Thank you so much; it worked!

I was wondering now, is it possible to add spacing in between the rows? I tried adding these to the plugin options but it was just shots in the dark.

.tablepress-id-43 {
	border-spacing: 10px;
	padding: 20px;
	padding-top: 20px;
}

I used “20px” just as an example to see if I could notice a difference.

Thank you again!

Carmen

Hi Carmen,

something like

tablepress-id-43 {
  border-collapse: separate;
  border-spacing: 10px;
}

should work.

Regards,
Tobias