...

View Full Version : Need help with background-image in CSS3



sberube
08-01-2012, 08:13 PM
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

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

sberube
08-01-2012, 09:06 PM
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.



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

TylerB
08-01-2012, 09:33 PM
Wouldn't it be easier to just create three different div elements and set the background to each of those divs?

sberube
08-01-2012, 09:56 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum