background image position won't change with inline css

Forum Moderators: not2easy

Message Too Old, No Replies

background image position won't change with inline css

but works fine in stylesheet

EcksTen

8:46 pm on Aug 11, 2009 (gmt 0)

Hello all, I've got a CSS query, the following code doesn't work, and I don't understand why (It should be a basic image rollover, where "MyImage.jpg" contains both images I want, one above the other):

<head>
<style>
a.testpic {display:block;width:250px;height:312px;}
a.testpic:hover {background-position:bottom;}';
</style>
</head>

however, if I change it to:

<head>
<style>
a.testpic {display:block;width:250px;height:312px;background:url(images/MyImage.jpg)top no-repeat;}
a.testpic:hover {background-position:bottom;}';
</style>
</head>

...it works.

Can anyone tell me why the inline background image doesn't work and the embedded style does?

I need to have the reference to the image inline as it's part of some PHP code, otherwise I would write it all in the stylesheet.

Any help/thought/advice greatly appreciated!

EcksTen

swa66

10:54 pm on Aug 11, 2009 (gmt 0)

What you see is specificity at work.

[w3.org...]

The inline style has a higher specificity (1.0.0.0) compared to the specificity of your CSS file (0.0.2.1) and (0.0.1.1), preventing the :hover from winning.

EcksTen

1:12 pm on Aug 12, 2009 (gmt 0)

Thank you swa66, I still have a lot to grasp re: CSS so thank you for the pointer!

Given the specificity information, shouldn't this then work? Or again, am I missing something with regards to how classes & pseduo classes work?

<head>
<style>
a.testpic {display:block;width:250px;height:312px;top no-repeat;}
a.testpic:hover {background-position:bottom;}';
</style>
</head>

SuzyUK

1:56 pm on Aug 12, 2009 (gmt 0)

Now you're running up against the shorthand properties rules..

the inline style

style="background:url(images/MyImage.jpg);"

is set using the background shorthand property [w3.org]. When you use a shorthand property it will implicitly set the other parts of that property back to the default if they're not redefined:. So by using the background inline you are resetting the following without knowing it.

background-color: transparent
background-repeat: repeat
background-attachment: scroll
background-position: 0% 0%

the :hover pseudo class selector cannot overrule the inline rule. Pseudo classes like hover can't be targeted inline, they can only be called on via a stylesheet so your hover rule can never exceed the 1,0,0,0 specificity set by the inline style. You need for it not to be overruling an inline style but adding to it ;)

so you need to get a bit more specific with your rules..

something like this should work:

CSS:
a.testpic {
display: block;
width: 250px;
height: 312px;
background-repeat: no-repeat;
/* the position 0% 0% is the default so need not be set */
}
a.testpic:hover {
background-position: 0% 100%;
}
HTML:
<a href="" style="background-image: url(images/MyImage.jpg);" class="testpic" ></a>

in the testpic rules you only need to define the bits that are not the defaults, then your inline rule should only target the background-image itself, none of the other properties involved in the shorthand, so the cascading CSS is still picked up

HTH

EcksTen

1:36 pm on Aug 13, 2009 (gmt 0)

Thanks for the extra information SuzyUK! It works :)
Many thanks to swa66 and you for your help with this problem, I now feel more enlightened about CSS and better equipped to code in the future - You are both most helpful!

Thanks again.

EcksTen