html - 在CSS中对齐div元素的背景图像

标签 html css web background-image css-position

所以我是 css 的新手,并且一直在尝试开发一个基本的网站作为一个大学元素,但是我在对齐具有类名 mainhead 的 div 的背景图像时遇到了问题,它在屏幕左侧留下了一个空白. 无论我将其设置为什么宽度,左侧都有一个空白区域。

我不知道该怎么做,我没有设置任何填充或边距,也指定了 left: 0px,但没有快乐。 我遇到问题的类(class)是主要类(class) 这是代码,请帮助!

.loginbox
{
    position: fixed;
    top: 0px;
    margin: 0px;
    left: 0px;
    font-weight: bold;
    background-color: #2C2C2C;
    text-align: right;
    width: 1370px;
    height: 40px;
}
.loginbut
{
    background-color: #2C2C2C;
    font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    font-size: 100%;
    color: #c9c9c9;
    text-align: right;
    margin-right: 50px;
    margin-top: 5px;
    border-color: #2C2C2C;
    border-radius: 8px;
    top: 10px;
    text-decoration: none;
    outline: none !important;
}
.loginbut:hover
{
    background-color: #000000;
}
.mainhead
{
    background-image: url("grey.jpg");
    background-repeat: none;
    border: 1px solid black;
    font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    top: 40px;
    width: 1360px;
    height: 170px;
    color: #c9c9c9;
    text-align: center;
}
.mainhead h1
{
    font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    font-size: 300%;
}

最佳答案

使用background-position: center center;和背景大小:封面;并从 mainhead 中删除宽度。希望它能工作

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

关于html - 在CSS中对齐div元素的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31995897/

相关文章:

jquery - 当我切换/添加具有其他背景的另一个类时,为什么我的背景 svg 没有改变?

javascript - 避免同时具有 css 和 js 依赖项的插件渲染阻塞

php - 如何在浏览器的同一页面中获取 HTML 表单结果?

css - commanbutton 中的 Primefaces 自定义图标

jquery - 浏览器未观察到 data-* 的更改,CSS 属性选择器属性未呈现

html - 如何强制列保留在用户的 View 中

Android WebView 整页

HTML5/Javascript 视频过滤

javascript - 如何从 JSON 动态生成 HTML 中的嵌套复选框列表?

python - 与仅将 Foundation 文件放入静态相比,使用 Foundation Django 包有什么好处