简体   繁体   English

图片未居中

[英]Image not centered

I have a loginPage.php file that goes as: 我有一个loginPage.php文件,它是:

<?php 
    //some php stuff
?>

<!DOCTYPE html>

<html>
<head>
<title>Login Form Design</title>
    <link rel="stylesheet" type="text/css" href="stylelogin.css">
<body>
....and so on

My stylelogin.css file goes as: 我的stylelogin.css文件为:

body{
    margin: 0;
    padding: 0;
    background: url(image1.jpg);
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
}

.loginbox{
...and so on

Issue 问题

在此处输入图片说明

This is what my login page looks like. 这就是我的登录页面。 Please note the image in background. 请注意背景图片。 It isn't centered, while I assumed that the css script would be doing this job. 它没有居中,而我假设CSS脚本会完成这项工作。 Also, if I press the Login button with incorrect credentials, and hence getting back to this page itself but after a reload, the image is then centered (pic below). 另外,如果我使用不正确的凭据按Login按钮,因此在重新加载后返回此页面本身,则图像居中(如下图所示)。 Please help me understand what am I doing wrong, and why the body section in stylelogin.css not doing the required thing. 请帮助我了解我在做什么错,以及为什么stylelogin.cssbody部分没有执行所需的操作。 Thanks... 谢谢...

在此处输入图片说明

Edit 编辑

background-size: 100vh 100vw; gives: 得到:

在此处输入图片说明

Try this 尝试这个

body {
        background: url(nohisto/media/test.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM