I have been trying to get this right for a while. It seems like I have tried everything that I can think of but it doesn't work the way I want it to. I don't understand why either. I have done things like this numerous times without this much trouble.
My logo and header background images are 2 seperate files.
As can see below, I have a div that contains the image that is my logo. My logo is a png with some text and a transparent background. I tried to get the banner background file to display in the background of the <div> that is of the class"Header". I
tried this setting the background-image property in my style sheet. The idea was that this would appear behind the logo since it has a transparent background. I can't seem to figure out how to get the banner background.png file to display behind the logo
file. I want to do this with CSS.
I know that this will not work with the code that is currently displayed below. I set the background color of the div with the .Header class to black to test that I could get the color to work and it does. Even if I remove this and set the background image
to the banner background.png it doesn't display. I don't understand why it won't. I think the path in my url is right.
The background of the .Logo is set to blue currently to make it more visible while I am positioning it. It will eventually go back to transparent so that just the text in it shows up.
I think I have the paths for the urls correct. My style sheets are in a folder called "styles". With in this folder there is another folder called "Images". This is where the logo and background image are.
.Header { background-color:black; <-- even if I remove this the image won't show up in the background background-image: url("~Styles/images/banner background.png"); background-position:center; background-repeat: no-repeat; position: relative;
}
.Logo
{ background-color: Blue; <-- this is temporarily blue to help with positioning since the logo is white text on a transparent background width: auto; height: auto; position: relative; right:20px; }
Gaining competency by discovering my incompetencies.
I removed the tilde but it still didn't work. I did this with the / and with out. I also did this with and with out the quotes. This covered the different combinations but it still didn't work.
Gaining competency by discovering my incompetencies.
Is the background of the header black? If not then the style is not being applied. You will also have problems with the transpaency in IE6. You should consider changing them to .gifs instead!
When I leave the background color for black in the header div it is rendered as black.
I was trying to check which version of IE I have. I am running Vista and couldn't figure out how to check it. I think it 7 or 8 though. Do these versions have trouble with transparencies?
I don't think the header graphic 100% opaque. Someone else made it for me. He might have started with a transparent file in photoshop. I need to check with him.
Any other thoughts
Gaining competency by discovering my incompetencies.
So, do you think it is good to code for IE 6? It is still widely used isn't it?
Would a bit depth of 32 for the pngs effect this? I think some browsers that support .png only support it to a certain bit depth. I am not sure if this is true with most modern browsers.
Gaining competency by discovering my incompetencies.
People using IE6 is going down slowly over the years, however 25.3% (http://www.w3schools.com/browsers/browsers_stats.asp) of people are using IE6. If you dont have a captive audience (such
as an intranet application) I would recommend you changing the png's for gif images due to this bug:
So to make sure I understand correctly, you could get it to work with the path that you specified?
I talked to a friend of mine that works for a big .com job placement type company that uses .net for everything. He said that they only use gifs and jpegs. They don't use any pngs. They want to be accessible to as many people as they can so it makes
sense.
I think I am going to avoid png for a while. If i go back to gif then I don't have these issues. The browser support seems to be very spotty still. I want to try to make sites accessible to as many paople as I can ( with in reason).
25% is pretty high for an audience that uses a particular browser.they seem worth trying to appeal to . I have chalked this up to a learning lesson that favors gifs and not pngs. It seems lik ethe design side of things is riddled with things like this.
"C'est la vie"
thanks for the help.
Gaining competency by discovering my incompetencies.
newbie2C#
Member
694 Points
1179 Posts
Why won't this render correctly using css to display the header background?
Aug 16, 2008 04:28 PM|LINK
I have been trying to get this right for a while. It seems like I have tried everything that I can think of but it doesn't work the way I want it to. I don't understand why either. I have done things like this numerous times without this much trouble.
My logo and header background images are 2 seperate files.
As can see below, I have a div that contains the image that is my logo. My logo is a png with some text and a transparent background. I tried to get the banner background file to display in the background of the <div> that is of the class"Header". I tried this setting the background-image property in my style sheet. The idea was that this would appear behind the logo since it has a transparent background. I can't seem to figure out how to get the banner background.png file to display behind the logo file. I want to do this with CSS.
I know that this will not work with the code that is currently displayed below. I set the background color of the div with the .Header class to black to test that I could get the color to work and it does. Even if I remove this and set the background image to the banner background.png it doesn't display. I don't understand why it won't. I think the path in my url is right.
The background of the .Logo is set to blue currently to make it more visible while I am positioning it. It will eventually go back to transparent so that just the text in it shows up.
I think I have the paths for the urls correct. My style sheets are in a folder called "styles". With in this folder there is another folder called "Images". This is where the logo and background image are.
This is the code from my aspx page:
this is the relavent portion of the style sheet
DavidKiff
Star
8660 Points
1733 Posts
Re: Why won't this render correctly using css to display the header background?
Aug 16, 2008 04:53 PM|LINK
You cant use the ~ thatis used for server side controls only. Try removing that or adding a / instead :)
Visit my site
Follow me on Twitter
newbie2C#
Member
694 Points
1179 Posts
Re: Why won't this render correctly using css to display the header background?
Aug 16, 2008 05:29 PM|LINK
I removed the tilde but it still didn't work. I did this with the / and with out. I also did this with and with out the quotes. This covered the different combinations but it still didn't work.
DavidKiff
Star
8660 Points
1733 Posts
Re: Why won't this render correctly using css to display the header background?
Aug 16, 2008 05:32 PM|LINK
Hmm have you tried
background-image: url("images/banner background.png");
View the source as well to ensure the CSS file is attached. Should be <link.... etc within the <head> at the top
Visit my site
Follow me on Twitter
DavidKiff
Star
8660 Points
1733 Posts
Re: Why won't this render correctly using css to display the header background?
Aug 16, 2008 05:36 PM|LINK
Is the background of the header black? If not then the style is not being applied. You will also have problems with the transpaency in IE6. You should consider changing them to .gifs instead!
Visit my site
Follow me on Twitter
newbie2C#
Member
694 Points
1179 Posts
Re: Why won't this render correctly using css to display the header background?
Aug 16, 2008 05:39 PM|LINK
I just tried it but it didn't work.
I have confirmed that the style sheet is working by setting the background colors behind the logo and the div that contains it.
I also viewed the source and it still had both of the links to the two style sheets( one for the page and one for the navigation).
newbie2C#
Member
694 Points
1179 Posts
Re: Why won't this render correctly using css to display the header background?
Aug 16, 2008 05:57 PM|LINK
When I leave the background color for black in the header div it is rendered as black.
I was trying to check which version of IE I have. I am running Vista and couldn't figure out how to check it. I think it 7 or 8 though. Do these versions have trouble with transparencies?
I don't think the header graphic 100% opaque. Someone else made it for me. He might have started with a transparent file in photoshop. I need to check with him.
Any other thoughts
newbie2C#
Member
694 Points
1179 Posts
Re: Why won't this render correctly using css to display the header background?
Aug 16, 2008 06:00 PM|LINK
So, do you think it is good to code for IE 6? It is still widely used isn't it?
Would a bit depth of 32 for the pngs effect this? I think some browsers that support .png only support it to a certain bit depth. I am not sure if this is true with most modern browsers.
DavidKiff
Star
8660 Points
1733 Posts
Re: Why won't this render correctly using css to display the header background?
Aug 16, 2008 07:45 PM|LINK
Hi,
I tried to replicate your issue and I can only get it working with a starting / like so:
background-image: url("/images/banner background.png");
People using IE6 is going down slowly over the years, however 25.3% (http://www.w3schools.com/browsers/browsers_stats.asp) of people are using IE6. If you dont have a captive audience (such as an intranet application) I would recommend you changing the png's for gif images due to this bug:
http://support.microsoft.com/kb/294714
Visit my site
Follow me on Twitter
newbie2C#
Member
694 Points
1179 Posts
Re: Why won't this render correctly using css to display the header background?
Aug 16, 2008 11:02 PM|LINK
So to make sure I understand correctly, you could get it to work with the path that you specified?
I talked to a friend of mine that works for a big .com job placement type company that uses .net for everything. He said that they only use gifs and jpegs. They don't use any pngs. They want to be accessible to as many people as they can so it makes sense.
I think I am going to avoid png for a while. If i go back to gif then I don't have these issues. The browser support seems to be very spotty still. I want to try to make sites accessible to as many paople as I can ( with in reason).
25% is pretty high for an audience that uses a particular browser.they seem worth trying to appeal to . I have chalked this up to a learning lesson that favors gifs and not pngs. It seems lik ethe design side of things is riddled with things like this. "C'est la vie"
thanks for the help.