background-size does not work [closed]

Question

I made it so that when you hover over a link in the navigation menu, the background appears ... I want to change the size of this background, and something does not work. Neither height , nor width , nor background-size work, what could be the problem?

Here is what I write:

 nav ul li a:hover{ background: #e7e7e7; border-radius: 10px; background-size: 450px; }

By the way, not a single parameter in the background-size works, neither % , nor px , nor cover ... Where can I find the problem?

Here is a screen that shows a:hover , the size of which I want to change:

_{(source: screenshot.ru )}

HTML:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Effektiv Fox</title> <link href="styles/main.css" rel="stylesheet" type="text/css"> </head> <body> <header> <nav> <ul class="navigation"> <li><a href="#">О нас</a></li> <li><a href="#">Цены</a></li> <li><a href="#">Условия</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">История</a></li> </ul> <a id="foximg" href="index.html"><img src="fox.png" alt="effektiv fox" align="right"></a> </nav> </header> <div id="mainboard"> <br> osdadsadadas </div> <footer></footer> </body> </html>

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; } #mainboard { background: #e7e7e7; height: 1000px; /* Высота блока */ width: 1000px; /* Ширина блока */ margin: 0 auto; text-align: left; word-break: break-all; } .navigation { margin: 0; padding: 22px 0px 0px 20px; } #foximg { top: 1px; /* Расстояние от нижнего края окна браузера */ position: absolute; /* Абсолютное позиционирование */ left: 1365px; }

Judging by the code you do not have any background image for the link.
@VitaliyShevchenko, through the url of the background is not specified - yes, but there is a background: # e7e7e7;
If so, how can I resize the background: # e7e7e7 in a hover?
Change the size of the link itself, why these tricks with the background?
@VitaliyShevchenko, I'm trying to create something so that the hover is rounded only at the top, but at the bottom remains square.

Answer 1 · 2015-10-15T12:29:01

background-size is applicable - if the background is a picture, you have only the color specified. Height and width - do not work - because the link is an inline element - give it display: block; If you are with a hover - you will change padding - your menu will be jumping.

DisguisePerceptron DisguisePerceptron 399 one 3 17 · Answer 2 · 2015-10-15T11:35:48

You can use the padding property - the size of internal indents. This is fully consistent with your task. Add to

 nav ul li a:hover

anything in the spirit

 padding: 15px;

I think, and so it will come down ... A little bit of rounding is visible from below.

Alexander Igorevich Alexander Igorevich 3,679 one eight 23 · Answer 3 · 2015-10-15T11:47:31

You can make rounds only from above 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; }

In my case, there was enough padding: 10px 15px 20px 15px;

background-size does not work [closed]

Closed due to the fact that it is necessary to reformulate the question so that it was possible to give an objectively correct answer by the participants Aslan Kussein , korytoff , Max Mikheyenko , YuriiSPb ♦ , Vladimir Glinskikh 16 Oct '15 at 4:45 .

3 answers 3

More articles: