Classic tabs - How do I Fill tab with an image

Support
#1

Hi, How can I fill a classic Tab content area with an image?

#2

Hi There,

Thanks for writing in!

There is two way to add image in the content.
1. if you need to ad any image to content area then please upload image in media section upload a image and copy the image path. Please see the screenshot.

After that please edit your tab content in cornerstone and write following code.

<img src="https://example.com/wp-content/uploads/2017/12/image.jpg" />

Please replace the image path with yours.

2. If you want to set background image for the tab content please write following css code to your customizer CSS and replace the image path with your image path. Also you can add . custom class to any tab.

.x-tab-content {
  background: url(https://example.com/wp-content/uploads/2017/12/image.jpg) 100% no-repeat;
}

Please lets us know how it goes.

Thanks

#3

Fantastic thanks… How do I get the image to be respinsive?

#4

That should be responsive, did you use the code and having responsive issues?

#5

HI… sorry yes it is responsive… can i have a seperate image for each tab?

#6

Hi,

You can add a class to your tab then use it to add your background.

eg.

.mytab1 {
      background: url(https://example.com/wp-content/uploads/2017/12/image.jpg) 100% no-repeat;
}

Hope that helps

#7

HI That worked nut the image is only as tall as the tab height … how do I make it the height of all the tabs?

#8

Hi,

Try to add background-size:cover;

.mytab1 {
      background: url(https://example.com/wp-content/uploads/2017/12/image.jpg) 100% no-repeat;
      background-size:cover;
}

Cover means to resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

For more information kindly refer to the link below.

https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Hope that helps.

#9

Hi… Nope it still oly loads to the height of the tab on the left?

#10

Hi there,

Would you mind providing the URL of your site so that we can check it?

Thank you.

#11

http://www.warrackstestdomain1.co.uk

#12

Hi there,

Please add this code as well:

.x-tab-content {
    display: flex;
}

.x-tab-content > .x-tab-pane {
    min-width: 100%;
}

Hope this helps.

#13

Hi,

Please Change code to this.

.x-tab-content {
    display: flex;
}

.x-tab-content > .x-tab-pane.mytab1 {
     min-width: 100%;
     background-image:url(http://www.warrackstestdomain1.co.uk/wp-content/uploads/2017/10/IMG_1141-700x467.jpg);
     background-repeat:no-repeat;
     background-size:cover;
}

.x-tab-content > .x-tab-pane.mytab2

} 

.x-tab-content > .x-tab-pane.mytab3

} 

.x-tab-content > .x-tab-pane.mytab4

}
#14

Sorry, I accidentally edited your reply.

#15

PERFECT… Thank you SOOOOO much

#16

You’re welcome :slight_smile:

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.