CSS within app theme, 2 images background problem RSS

• • Reply
  

  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

  Phil Huhn (Michigan, USA)
• • Reply
  

  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

  Mark as answer posts that helped you.
  
• • Reply
  

  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;
  }

  Regards
  
  ( Mark as Answer if it helps you out )
  
  View my Blog
  • Edited by tusharrs on Apr 16, 2012 05:09 PM
• • Reply
  

  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.  :)

  • Marked as answer by pnhuhn on Apr 17, 2012 01:08 PM
• • Reply
  

  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

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  blog@opera
• • Reply
  

  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

  Phil Huhn (Michigan, USA)
• • Reply
  

  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

  PosterJob
• • Reply
  

  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

  Phil Huhn (Michigan, USA)
• • Reply
  

  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?

  PosterJob
  • Edited by riak on Apr 17, 2012 05:22 AM
• • Reply
  

  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

  Please mark the replies as answers if they help or unmark if not.