Question

I'm making a little tumblr theme and I'm hoping to create a customizable option for the user where they can either choose a border-top color and/or border-image ( and upload their own to the tumblr CDN ). I've got it to work with either/or, but not both.

In other words, I'd like for the default theme to come with a

border-top: #somecolor;

but they have the option to do

border-image: url('funtime.png');

The code should make it clear what I'm trying to do; it's just not working for some reason. Maybe a pro could help me out?

<meta name="image:top border" content="" />
<meta name="color:top border" content="#a64d00" />

body {
    border-top: 64px solid {color:top border};
    border-image: url('{image:top border}') 25% 25% 25% 25% repeat; 
}

I don't really know what else to do to get this to work. This way just gives the a blank space waiting to be occupied by an uploaded image. I take away the image option and the color works and vice versa.

Was it helpful?

Solution

You can't have both sadly, its either color or image. Example: http://jsbin.com/kobicodu/1/edit

As border-image was the last property declared and has a valid image it overrides the shorthand border-top color.

More info: http://css-tricks.com/understanding-border-image/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top