Html 背景图像始终与顶部对齐

我正在开发wordpress菜单。我的子菜单图像是小角度弯曲。为了更好地理解，我附上了这张图片。我的问题与子菜单有关

背景图像

我希望子菜单的背景图像解释根据内容。我的意思是，如果我有两个子菜单，那么我不想显示完整高度的子菜单背景

请建议我如何做到这一点

html

<ul id="menu" class="nav-main">
<li><a href="<?php bloginfo( 'url' ); ?>">HOME</a></li>
<li> <a href="<?php bloginfo( 'url' ); ?>/">Menu 1</a>
  <ul class="nav-sub submenuMenu1">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</li>
<li> <a href="<?php bloginfo( 'url' ); ?>">Menu 2</a>
  <ul class="nav-sub submenuMenu2">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</li>
<li> <a href="<?php bloginfo( 'url' ); ?>">Menu 3</a>
  <ul class="nav-sub submenuMenu3">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</li>
<li> <a href="<?php bloginfo( 'url' ); ?>/fundraise/">Menu 4</a>
  <ul class="nav-sub submenuMenu4">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</li>






#menu {
    width: 550px;
    height: auto;
    float: left;
    margin: 23px 0 0 62px;
}
#menu li {
    margin: 0 0 0 0;
    list-style-type:none;
}
#menu a {
    font-size: 14px;
    font-weight: bold;
    padding: 0 0 0 23px;
    text-decoration: none;
    text-shadow: 0.1em 0.1em #666;
}
ul.main-nav, ul.main-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav {
    z-index: 597;
}
.main-nav li:hover > ul {
    visibility: visible;
}
.main-nav li.hover, .main-nav li:hover {
    z-index: 599;
    cursor: pointer;
}
.main-nav li {
    float:left;
    display:block;
}
.main-nav li a {
    float: left;
    display:block;
    margin: 0!Important;
}
ul.nav-sub {
    visibility: hidden;
    position: absolute;
    padding:0;
    top: 0;
    left: 0;
    z-index: 598;
}
ul.nav-sub li {
    list-style:none;
    display:block;
    padding: 0;
    float: left;
    padding: 5px;
}

ul.nav-sub li a {
    font-size: 12px!important;
    font-weight: bold;
    text-shadow: 0.1em 0.1em #666;
    text-transform:uppercase;
}

ul.nav-sub a:hover {
    text-decoration: underline!Important;
}
.submenuMenu{
    width: 649px;
    height: 264px;
    float: left;
    margin: 39px 0 0 3px;
    padding: 11px 0 0 0!important;
    background: url(../img/bg_submenu.png) -1px 0 no-repeat;
}

.submenuMenu li {
    width: 300px!important;
    margin: 0!Important;
    padding: 5px 200px 5px 117px!important;
}

#菜单{
宽度：550px；
高度：自动；
浮动：左；
利润率：23px062px；
}
#菜单里{
保证金：0；
列表样式类型：无；
}
#菜单a{
字体大小：14px；
字体大小：粗体；
填充：0 23px；
文字装饰：无；
文字阴影：0.1em 0.1em#666；
}
ul.main-nav，ul.main-nav li{
列表样式：无；
保证金：0；
填充：0；
}
.主导航{
z指数：597；
}
.主导航李：悬停>ul{
能见度：可见；
}
.main nav li.悬停，.main nav li:悬停{
z指数：599；
光标：指针；
}
主导航李先生{
浮动：左；
显示：块；
}
.主导航李a{
浮动：左；
显示：块；
边距：0！重要；
}
ul.nav-sub{
可见性：隐藏；
位置：绝对位置；
填充：0；
排名：0；
左：0；
z指数：598；
}
ul.nav-sub-li{
列表样式：无；
显示：块；
填充：0；
浮动：左；
填充物：5px；
}
ul.nav-sub-li a{
字体大小：12px！重要；
字体大小：粗体；
文字阴影：0.1em 0.1em#666；
文本转换：大写；
}
ul.nav-sub a：悬停{
文字装饰：下划线！重要；
}
.子菜单{
宽度：649px；
高度：264px；
浮动：左；
利润率：39px0.3px；
填充：11px 0！重要；
背景：url（../img/bg_submenu.png）-1px 0不重复；
}
.子菜单{
宽度：300px！重要；
边距：0！重要；
填充：5px200px 5px17px！重要；
}

---

我的子菜单类具有子菜单背景。我知道这不是理想的代码，但我只想知道如何在背景图像弯曲成一定角度时根据内容将其粘贴到顶部。

删除为子菜单指定的高度。将高度添加为“自动”

.submenuMenu{
    width: 649px;
    height: auto;
    float: left;
    margin: 39px 0 0 3px;
    padding: 11px 0 0 0!important;
    background: url(../img/bg_submenu.png) left bottom no-repeat, #f4bfd5;
}

---

确保您的图像高度为25-30px，对于剩余空间，您可以使用背景色。

您可以添加代码（HTML和CSS）吗？请现在查看。我的子菜单类具有子菜单背景。我知道这并不理想，但我只想知道如何在背景图像弯曲成一定角度时根据内容将其粘贴到顶部。您尝试过了吗。子菜单{background-repeat-x:repeat；…还有其他属性}@Sowmya正确指出了。。。HTML pls？@ShivKumarGanesh这不会解决我的问题，我希望图像不会重复，但背景图像的底部应该在每种情况下都可见，已经尝试过同样的方法。但背景图像是剪切的。我想要背景图像底部，它是斜切的。您可以在图片的底部看到。请查看编辑后的问题。我的背景图像是带角度弯曲的。您的图像具有纯色，因此您可以将图像底部裁剪为30-35px的高度（以获得阴影效果）。并添加回答中给出的css是的，你是对的。但这张照片是从一个角度来的。如何重复此角度图像？将图像裁剪为png图像，使角度保持不变。这意味着基本上你应该裁剪成带有透明背景的矩形