Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Apr 17, 2012 01:04 PM by pnhuhn
Member
13 Points
19 Posts
Apr 16, 2012 04:59 PM|LINK
Hi: I am appling some css to a panel. I want two images in the panel and I need this to be all done with styles. This is an asp.net application using an app themes. .myPanel { border: 2px solid red; background: #fff; background-image: url(./Images/i1.gif), url(./Images/Close.gif); background-repeat: no-repeat; background-position: top left, top right; width: 300px; min-height: 50px; } I am getting "file not found", but if I use only one image it is happy. Phil
background css image
All-Star
33063 Points
8516 Posts
Moderator
Apr 16, 2012 05:03 PM|LINK
Have you tried doing it like this yet? background-image: url(../Images/i1.gif), url(../Images/Close.gif);
http://www.quirksmode.org/css/multiple_backgrounds.html
Contributor
3230 Points
668 Posts
Apr 16, 2012 05:09 PM|LINK
Hi,
.myPanel { background-image:url(http://yourwebsite.com/images/image1.png) repeat-x, url(http://yourwebsite.com/images/image2.png) repeat; }
170 Points
96 Posts
Apr 16, 2012 05:30 PM|LINK
Only safari supports multiple backgrounds.
if you test it on other browsers, it does not work. :)
Star
14410 Points
2451 Posts
Apr 16, 2012 05:42 PM|LINK
HI, check this site for mulitple background support in FF:
https://developer.mozilla.org/en/CSS/Multiple_backgrounds
Apr 16, 2012 07:44 PM|LINK
Hi:
Already seen (it was one of my resources): http://www.quirksmode.org/css/multiple_backgrounds.html
.. and ~ do not seem to work. .. and http stops the "file not found" error (that's confusing).
WC3 say's IE supports it, but it seem that it is not supported with themes.
Should of mentioned that the images are in the theme folder.
Phil
268 Points
88 Posts
Apr 16, 2012 09:03 PM|LINK
That one dot infront of the forward slash does not look right in your Image referance. And your missing quotes inside the brackets
Try just a forward slash. (root directory)
background: url('/ThemeFolder/Images/i1.gif'), url('/ThemeFolder/Images/i1.gif');
If you are getting file not found It's becasue your css is looking in the wrong place. :) starting from the root directory makes it easier.
Apr 16, 2012 11:32 PM|LINK
background-image: url('Images/i1.png'), url('Images/Close.gif');
does not cause a file not found error, but none of the images are displayed.
Apr 17, 2012 05:19 AM|LINK
I have been looking at this. And your syntax looks fine: http://www.css3.info/preview/multiple-backgrounds/
Try changing the min-height to just height to see if that is confusing the background positions.
Got a link to your site so I can get my firebug out?
164 Points
74 Posts
Apr 17, 2012 09:59 AM|LINK
Change your code is like this.
.myPanel { border: 2px solid red; background: #fff; background-image: url(../Images/i1.gif), url(../Images/Close.gif); background-repeat: repeat-y; background-position: top left, top right; width: 300px; min-height: 50px; }
pnhuhn
Member
13 Points
19 Posts
CSS within app theme, 2 images background problem
Apr 16, 2012 04:59 PM|LINK
Hi:
I am appling some css to a panel. I want two images in the panel and I need this to be all done with styles. This is an asp.net application using an app themes.
.myPanel
{
border: 2px solid red;
background: #fff;
background-image: url(./Images/i1.gif), url(./Images/Close.gif);
background-repeat: no-repeat;
background-position: top left, top right;
width: 300px;
min-height: 50px;
}
I am getting "file not found", but if I use only one image it is happy.
Phil
background css image
bbcompent1
All-Star
33063 Points
8516 Posts
Moderator
Re: CSS within app theme, 2 images background problem
Apr 16, 2012 05:03 PM|LINK
Have you tried doing it like this yet? background-image: url(../Images/i1.gif), url(../Images/Close.gif);
http://www.quirksmode.org/css/multiple_backgrounds.html
tusharrs
Contributor
3230 Points
668 Posts
Re: CSS within app theme, 2 images background problem
Apr 16, 2012 05:09 PM|LINK
Hi,
.myPanel
{
background-image:url(http://yourwebsite.com/images/image1.png) repeat-x, url(http://yourwebsite.com/images/image2.png) repeat;
}
( Mark as Answer if it helps you out )
View my Blog
sean freeman
Member
170 Points
96 Posts
Re: CSS within app theme, 2 images background problem
Apr 16, 2012 05:30 PM|LINK
Only safari supports multiple backgrounds.
if you test it on other browsers, it does not work. :)
raju dasa
Star
14410 Points
2451 Posts
Re: CSS within app theme, 2 images background problem
Apr 16, 2012 05:42 PM|LINK
HI,
check this site for mulitple background support in FF:
https://developer.mozilla.org/en/CSS/Multiple_backgrounds
background css image
rajudasa.blogspot.com || blog@opera
pnhuhn
Member
13 Points
19 Posts
Re: CSS within app theme, 2 images background problem
Apr 16, 2012 07:44 PM|LINK
Hi:
Already seen (it was one of my resources): http://www.quirksmode.org/css/multiple_backgrounds.html
.. and ~ do not seem to work. .. and http stops the "file not found" error (that's confusing).
WC3 say's IE supports it, but it seem that it is not supported with themes.
Should of mentioned that the images are in the theme folder.
Phil
background css image
riak
Member
268 Points
88 Posts
Re: CSS within app theme, 2 images background problem
Apr 16, 2012 09:03 PM|LINK
That one dot infront of the forward slash does not look right in your Image referance. And your missing quotes inside the brackets
Try just a forward slash. (root directory)
background: url('/ThemeFolder/Images/i1.gif'), url('/ThemeFolder/Images/i1.gif');If you are getting file not found It's becasue your css is looking in the wrong place. :) starting from the root directory makes it easier.
background css image
pnhuhn
Member
13 Points
19 Posts
Re: CSS within app theme, 2 images background problem
Apr 16, 2012 11:32 PM|LINK
Hi:
background-image: url('Images/i1.png'), url('Images/Close.gif');
does not cause a file not found error, but none of the images are displayed.
Phil
background css image
riak
Member
268 Points
88 Posts
Re: CSS within app theme, 2 images background problem
Apr 17, 2012 05:19 AM|LINK
I have been looking at this. And your syntax looks fine: http://www.css3.info/preview/multiple-backgrounds/
Try changing the min-height to just height to see if that is confusing the background positions.
Got a link to your site so I can get my firebug out?
umamahesh202...
Member
164 Points
74 Posts
Re: CSS within app theme, 2 images background problem
Apr 17, 2012 09:59 AM|LINK
Hi,
Change your code is like this.
.myPanel { border: 2px solid red; background: #fff; background-image: url(../Images/i1.gif), url(../Images/Close.gif); background-repeat: repeat-y; background-position: top left, top right; width: 300px; min-height: 50px; }background css image