Cannot add background image in table’s cell using

• 

  lanhtieuanh · Member · Nov 25, 2019 at 2:09 pm

  • Copy link
  • Add topic to favorites

  I’ve try to make a table with different image background for each cell. But it didn’t work.
  When I paste this code in WordPress editor, it automatically remove all my background.

  Cell 1

  Cell 2

  Cell 3

  Could you please help me to take a look? Thanks a lot,

  P.s: Because this is a free blog, I can’t use CSS so I have to put all style inline.

  The blog I need help with is: (visible only to logged in users)

• 

  lanhtieuanh · Member · Nov 25, 2019 at 2:13 pm

  • Copy link

  Here the code which was removed from the content above https://codepen.io/vtta/pen/oNNRaoa

• 

  staff-doublebassd · Staff · Nov 25, 2019 at 5:44 pm

  • Copy link

  Hi there,

  What post/page were you trying to add the table to? Are you using the Table Block?

  https://en.support.wordpress.com/advanced-html/#tables

• 

  lanhtieuanh · Member · Nov 25, 2019 at 6:46 pm

  • Copy link

  Hi,

  I’m trying to style a normal page (make a listing page). I’ve tried the Table Block but not worked because I want to add image background for each cell (but it doesn’t have this option). So I make a table code as what you see in the link above.

  It works well in others application but if I try to copy > paste this part :

  <td style=”width: 200px; height: 300px; background-position: center; background-size: cover; color: #fff; text-align: center;” background=”https://dummyimage.com/600×400/000/fff.jpg”>

  in WordPress editor, it will automatically remove the background=”URL”

  I’ve tried to use this code in many post type (pages, posts, portfolios) but still have this situation.

  Could you please take a look? Thanks,

• 

  staff-blorbo · Staff · Nov 25, 2019 at 10:44 pm

  • Copy link

  Would you please add that, save the page as a draft, and let us know the name of the page so we can take a closer look?

• 

  lanhtieuanh · Member · Nov 26, 2019 at 6:28 am

  • Copy link

  Hi, you can take a look at this page https://mongphonhoa.wordpress.com/?page_id=1473&preview=true

• 

  fstat · Staff · Nov 26, 2019 at 7:31 am

  • Copy link

  Hi there,

  You’ll need to use some inline CSS to make this work.

  Replace background="https://dummyimage.com/600x400/000/fff.jpg"

  with style="background-image:url('https://dummyimage.com/600x400/000/fff.jpg');"

  and it will work.

• 

  lanhtieuanh · Member · Nov 26, 2019 at 8:46 am

  • Copy link

  Hi,

  Thanks for your help. Great, it works perfectly. But may I have another question? Now the image is ok, but then the text is always on top top image, instead of center, I’ve tried to use text-align: center and vertical-align: middle but it doesn’t work.

  Could you please help me to find a way out? The page is always https://mongphonhoa.wordpress.com/?page_id=1473&preview=true

  Thanks,

• 

  staff-mckluskey · Staff · Nov 26, 2019 at 10:54 am

  • Copy link

  It looks like you have added the styling in the wrong place. You’ll want to add the inline CSS to the td and not to the a, like this:

  <td style="vertical-align: middle; background-position:center;background-size:cover;color:#fff;background-image:url('https://ocuala.files.wordpress.com/2019/11/sinh-nhacca3cc82t-3.4.png');"><a style="display:block;width:100%;color:#fff;text-align:center;" href="https://ocuala.wordpress.com/2019/11/25/douj-bjyx-sinh-nhat-ca-ca-part-3/">[DOUJ-BJYX] Sinh nhật ca ca -part 3</a></td>

  I hope that helps :)

• 

  lanhtieuanh · Member · Nov 26, 2019 at 1:55 pm

  • Copy link

  Ok, I got it. Thank you so much :)