[CSS] background-image + repeat-y stopt werking hover kleur

[Barreljan]

Beste,

Ik zit oogwaarschijnlijk met een idioot probleem of ik kan het niet vinden met een avond google'n. Of een technische beperking binnen CSS. Who knows

Op een nieuwe site die ik in elkaar wil zetten zou ik in een knop (met een bestaande a:hover die verkleurd) een background-image kwijt willen. Dit kan, maar deze moet repeated op de y-as zodat het matched aan de gehele menu (navigation) balk. Dit werkt, maar dan is de a:hover niet meer werkend. Als ik no-repeat mee geef aan de background-image, dan werkt de a:hover naar lichtblauw weer.

Stukje CSS:

Cascading Stylesheet:

#content-navigation ul li a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  padding: .25em 10px .25em 10px;
  background: #396da5 url('../images/page-back.gif') repeat-y;
  margin: 0;
}
#header-navigation ul li a:hover,
#content-navigation ul li a:hover,
#header-navigation ul li .current,
#content-navigation ul li .current {
  background-color: #6b92bc;
  /* licht-blauw */
}

De code van de div:

HTML:

 <div id="content-navigation">
   <h4 class="hidden">Category Navigation</h4>
      <ul>
        <li><a href="file.php?page=blaat">Blaatknop</a></li>
      </ul>
 </div>

Wat gaat er mis ? Ik heb diverse opties geprobeerd met de verschillende opties in CSS.

background: #396da5;
background-image: url('../images/page-back.gif') repeat-y;
en
background: #396da5;
background: url('../images/page-back.gif') repeat-y;
of
background-color: #396da5;
background-image: url('../images/page-back.gif') repeat-y;

Niet dat de kleur erg interessant is bij een repeat van een background-image, maar gaat om het idee. Zodra ik maar de repeat naar no-repeat zet (op welke manier dan ook) dan werkt het. Echter, de div is hoger dan de background (.gif is volgens mij 5px) dus het moet wel 'vullend' zijn.

Aangezien ik iets te weinig met css doe kan ik ook niet de matchende zoekterm op google kwijt. Gaande weg wel hoop uitleg over CSS gezien maar dit vraagstuk nog niet. Een kleine pointer in de richting is meer dan welkom!

[W1LL3M]

Splits het eens netjes uit:
background-color: #396da5;
background-image: url('../images/page-back.gif');
background-repeat: repeat-y;

Dan zal het wel werken. Elk van deze properties kun je overrulen in je :hover css.

[ Voor 15% gewijzigd door W1LL3M op 14-10-2014 00:08 ]

[Barreljan]

Dat is opzich altijd netjes en ik heb het nu direct zo ingevoerd. Maar helaas, de background color a:hover word niet 'uitgevoerd' als de muis over de link (gehele div dus) gaat. Deze blijft nu met de vaste image en word niet lichtblauw, zonder image.

[HansvDr]

Op de hover background-image: none;

Of ik begrijp je vraag verkeerd

[ Voor 4% gewijzigd door HansvDr op 14-10-2014 09:16 ]

[Barreljan]

Damn wat simpel.... Waarom ik dit niet heb kunnen vinden weet ik niet maar inderdaad

Cascading Stylesheet:

#header-navigation ul li a:hover,
#content-navigation ul li a:hover,
#header-navigation ul li .current,
#content-navigation ul li .current {
  background-color: #6b92bc;
  background-image: none;
}

Dank HansvDr

[Guillome]

of alles overschrijven met background: #6b92bc;