css - 在导航菜单后面的标题中插入图像 | Tesseract 主题

标签 css wordpress

17 年 11 月 26 日的原帖:

我是编码新手,在插入背景图片时遇到问题。我想将它显示在顶部导航菜单的后面,横跨屏幕的整个宽度。我在 WordPress 中使用 Tesseract 主题,并在“附加 CSS”下插入了执行此操作的代码。到目前为止,这是我所拥有的(尽管网页 CSS 包含真实的 URL,但出于隐私考虑,我在此处更改了图像 URL):

body { 
background: #f8f8f8 
url(http://examplewebsite.com/imagename.jpeg) 
repeat-x top; 
background-size: 1920px 100px; }

我无法弄清楚的部分是 (1) 如何正确缩放/裁剪图像(因为它现在被拉伸(stretch)了),以及 (2) 如何让图像锁定到页面顶部导航菜单,向下滚动页面后随菜单一起消失。

我知道我可能需要解决一些问题,所以非常感谢您的帮助!

编辑(2017 年 11 月 28 日):

这个新代码看起来如何?图片现在实际上延伸到整个页面,而不是仅仅停留在顶部导航菜单后面的页眉中。我想我写错了“div”。

body { 
background: #f8f8f8 
url(http://examplewebsite.com/imagename.jpeg) 
repeat-x top; 
background-size: cover;}
div {position:absolute}

最佳答案

你可以使用“background-size: cover”或“background-size: contain”,也不要在正文中使用背景,只需定义新的div并给它“position:absolute”

关于css - 在导航菜单后面的标题中插入图像 | Tesseract 主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47506290/

相关文章:

html - 清除行内 block 元素到下一行

css - 居中相对大小的图像

html - CSS - 悬停触发另一个悬停

php - 如果端口不是 80,.htaccess 重定向到错误页面

WordPress:查询帖子媒体库中的所有图像

html - 我可以仅在祖先​​不包含某个类时才应用 CSS 吗?

css - 如何设置折叠的反向 Bootstrap 导航栏下边框颜色的样式?

html - 将 bootstrap CSS 类属性添加到文本框 ASP.Net MVC

css - 如何显示下拉菜单超过标题div

wordpress - WooCommerce - 类别和产品标签 SEO - Google 惩罚?