Why I Can't Add Background Image to Ajax Tab Body In CSS

Question

0.00/5 (No votes)

See more:

hi all,

I have added a background image to ajax tab body in CSS but doesn't know why the image doesn't appear when I run the program. I have already added the cssstyle to ajax tab container. My tab container and tabs are created dynamically in C#, and my image is in 'Image' folder as 'TabBackground', image is in jpg format.

This is my codes:

C#

//Cs file
 AjaxControlToolkit.TabContainer container = new AjaxControlToolkit.TabContainer();
            container.ID = "TabContainer";
            container.CssClass = "tabstyle";

CSS

/*Css file*/

.tabstyle .ajax__tab_body
{
    background-image:url(Image/TabBackground.jpg);
}

Thanks.

Posted 19-Oct-15 16:27pm

Member 11999641

Add a Solution

Comments

Krunal Rohit 20-Oct-15 0:34am

Use F12 and inspect the tab body. And then try to change the background-color from browser itself.

-KR

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

_Amy · Answer 1 · 2015-10-19T17:12:00

Solution 1

Try this:

CSS

.tabstyle .ajax__tab_body
{
    background-image:url('Image/TabBackground.jpg') !important;
}

--Amy

Posted 19-Oct-15 17:12pm

_Amy

Updated 19-Oct-15 17:13pm

v2

Comments

Member 11999641 19-Oct-15 23:16pm

hi _Amy, thanks for your reply, have tried this but result is still the same.

_Amy 19-Oct-15 23:18pm

Is your url correct? Can you recheck that?

Member 11999641 19-Oct-15 23:21pm

yes is correct, I have set that image as my chart background and it works, in this format:Chart.BackImage = "Image/TabBackground.jpg"; in C#. but not sure why it doesn't work when I try to set that image in css as my tab panel background.

_Amy 19-Oct-15 23:23pm

Where you placed your tab? Is it in root directory or in some folder?

Member 11999641 19-Oct-15 23:24pm

my tab is being generated dynamically in C#. Like this: AjaxControlToolkit.TabPanel panel = new AjaxControlToolkit.TabPanel();
panel.HeaderText += item.Text;
container.Tabs.Add(panel);

_Amy 19-Oct-15 23:26pm

I am asking about page path from root. e.g. : MyProject/Folder/default.aspx

Member 11999641 19-Oct-15 23:28pm

C:\Users\username\Desktop\Project\Project\Source Code\Project1\Project1\Project1.aspx.cs

_Amy 19-Oct-15 23:30pm

Then just try this:
background-image:'Image/TabBackground.jpg' !important;

Member 11999641 19-Oct-15 23:33pm

still no image appeared, if I set background-color for the ajax tab body in css, it works, but image doesn't work.

_Amy 19-Oct-15 23:39pm

Try this:
background:('Image/TabBackground.jpg') !important;

Member 11999641 19-Oct-15 23:56pm

still the same result..that's weird..