Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with background-image in CSS3

    Hello;
    I am a bit new to CSS and need some help if you are willing to help

    I have read this page over and over and over...
    http://www.css3.info/preview/multiple-backgrounds/
    Among other websites.

    Here is my CSS
    Code:
    .v-table-primary-navigation tr.v-selected {
    	background: transparent;
    	background-image: url(images/primary-navigation-background-selected-left.png), url(images/primary-navigation-background-selected-center.png), url(images/primary-navigation-background-selected-right.png);
    	background-position: left, center, right;
    	background-origin: border-box, content-box, border-box;
    	background-repeat: no-repeat, no-repeat, no-repeat;
    	border-bottom-style: hidden;
    	/*
    	
    	background-size: 5px 100%;
    	background-color: #xxx9aa7b6;
    	background-position: 0 -1px;
    	*/
    }
    I have 3 images, I have a left side which is 6px wide by 30px tall, middle image is 1px wide by 30px tall, right side is 6px wide by 30px tall.

    I am trying to dock the left on the left, right on the right and have the middle image (the 1x30) fill the remaining space between them.

    I'm not having any luck w/ this.

    The CSS right now as it shows was where I left off, basically it shows all 3 images and the middle 1px wide one is centered.

    I've tried changing center to left 6px right 6px and the no-repeat to repeat-x and it ends up filling it all up and covers up the left and right images.

    Any help here appreciated.

  • #2
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what I have so far, it works but the firefox hack is nasty.

    Also the images that were 6px I had to make 7px to avoid a whitespace.

    I hope there is a better way, again any help appreciated.

    Code:
    .v-table-primary-navigation tr.v-selected {
    	background: transparent;
    	background-image:
    		url(images/primary-navigation-background-selected-left.png),
    		url(images/primary-navigation-background-selected-center.png),
    		url(images/primary-navigation-background-selected-right.png);
    	background-position: left, center, right;
    	background-size: auto, 100%, auto;
    	background-origin: border-box, content-box, border-box;
    	background-repeat: no-repeat;
    	border-bottom-style: hidden;
    	/*
    	
    	background-size: 5px 100%;
    	background-color: #xxx9aa7b6;
    	background-position: 0 -1px;
    	*/
    }
    
    /* Firefox Hack */
    @-moz-document url-prefix() {
      .v-table-primary-navigation tr.v-selected {
    	background-size:auto, 95%, auto;
      }
    }

  • #3
    New Coder
    Join Date
    Aug 2012
    Location
    Kalamazoo, MI
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wouldn't it be easier to just create three different div elements and set the background to each of those divs?

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by TylerB View Post
    Wouldn't it be easier to just create three different div elements and set the background to each of those divs?
    These are GWT/Vaadin styles so I am trying to not inject additional elements into the DOM. CSS3 is supposed to do this, however it appears firefox isn't following the 100% value that IE, safari and chrome are.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •