did so that when hovering on the link in the navigation menu, the rear background appeared … I want to change the size of this background, and something does not work. No Height nor width nor background-size do not work in what could be the problem?

That’s what I say:

nav ul li a: hover {
  Background: # E7E7E7;
  Border-Radius: 10px;
  Background-Size: 450px;
}

By the way, no parameter in Background-size does not work, nor % nor px nor Cover … Where to look for a problem?

Here is a screen, which shows A: Hover , the size of which I want to change:

_{(Source: screenshot.ru )}

html:

& lt;! doctype HTML & gt;
& lt; HTML LANG = "EN" & GT;
& lt; Head & gt;
  & lt; Meta Charset = "UTF-8" & gt;
  & lt; Title & gt; Effektiv Fox & LT; / Title & GT;
  & lt; link href = "styles / main.css" REL = "STYESHEET" TYPE = "TEXT / CSS" & GT;
& lt; / Head & gt;
& lt; Body & gt;
& lt; Header & gt;
& lt; nav & gt;
  & lt; ul class = "navigation" & gt;
    & lt; li & gt; & lt; a href = "#" & gt; About us & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "#" & gt; Prices & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "#" & gt; conditions & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "#" & gt; contacts & lt; / a & gt; & lt; / li & gt;
    & lt; li & gt; & lt; a href = "#" & gt; history & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
  & lt; a ID = "foximg" href = "index.html" & gt; & lt; img src = "fox.png" alt = "Effektiv FOX" align = "Right" & gt; & lt; / a & gt;
& lt; / nav & gt;
& lt; / Header & gt;
& lt; div id = "Mainboard" & gt;
  & lt; br & gt;
Osdadsadadas.
& lt; / div & gt;
& lt; Footer & GT; & lt; / Footer & GT;
& lt; / body & gt;
& lt; / html & gt;

CSS:

body {
Background: #dedede;
 Text-Align: Center;
}
Header {
  Background: #bababa;
  width: 1000px;
  Height: 50px;
  Margin: 0 AUTO;
  Text-Align: Left;
}
NAV UL LI {
  Display: INLINE-BLOCK;
  List-Style-Type: None;
  Padding: 0;
  Font-Family: Verdana;
  Font-Size: 18,89px;
  Color: # 7A7A7A;
}
NAV UL LI A {
  Padding: 10px;
  Text-Decoration: None;
  Color: # 707070;
}
NAV UL LI A: HOVER {
  Background: # E7E7E7;
  Border-Radius: 10px;
  Background-Size: 450px;
}
# minboard {
  Background: # E7E7E7;
  Height: 1000px; / * Block height * /
  width: 1000px; / * Block width * /
  Margin: 0 AUTO;
  Text-Align: Left;
  Word-Break: Break-all;
}
.navigation {
  margin: 0;
  Padding: 22px 0px 0px 20px;
}
#Foximg {
  Top: 1px; / * Distance from the bottom edge of the browser window * /
  Position: Absolute; / * Absolute positioning * /
  Left: 1365px;
  }

Answer 1, Authority 100%

Background-size applicable – if on the background picture, you are only given color.
Height and Width – do not work – because the Inline link element is to ask him display: block;
If you are with a hover – you will change Padding – you will have a menu to ride.

Answer 2, Authority 50%

You can use the Padding property – the size of the internal indents. This fully matches your task. Add to

nav ul li a: hover

Something in the Spirit

padding: 15px;

Answer 3, Authority 50%

Make roundings only on top can be in this way:

nav ul li a: hover {
  Background: # E7E7E7;
  -WebKit-Border-Top-Left-Radius: 10px;
  -Webkit-Border-Top-Right-Radius: 10px;
  -Moz-Border-Radius-Topleft: 10px;
  -MOZ-Border-Radius-TOPRIGHT: 10px;
  Border-Top-Left-Radius: 10px;
  Border-Top-Right-Radius: 10px;
}