背景图片在html5中位置改变

<html style="overflow:hidden">
    <head>
        <title>test</title>
        <meta charset="utf-8"> 
        <style> 
        .bg {
        background:url(bg.jpg) no-repeat center center;
        }
        </style>
    <body id="atbg" class="bg" onresize="atcbg()">
    </body>
    <script>
        var ptw=474;  //图片宽高
        var pth=266;
        var atbg=document.getElementById("atbg");
        var tb=pth/ptw; 
        var tc=ptw/pth; 
        function atcbg() {
            var teh=window.innerHeight;             //获取页面宽高
            var tew=window.innerWidth;
            var ta=teh/tew;
            if (ta>=tb)                                            
            { 
                atbg.style.backgroundSize=(tc*teh)+"px "+teh+"px"; //使图片高度与页面高度相等，宽度按比例改变
            } else {
                atbg.style.backgroundSize=tew+"px "+(tb*tew)+"px";
            }
        }
    </script>
</html>

加上!DOCTYPE html，背景图片就会上移，用edge浏览器测试的，也没有报错。没有专门学习过，搞不懂。想在上面添加音、视频文件。

加一个样式
*{
margin:0,
padding:0
}
如有帮助给个采纳谢谢

不知道你这个问题是否已经解决, 如果还没有解决的话:

这篇博客: 这可能是最全的HTML(5)知识体系总结中的 1.文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义? 部分也许能够解决你的问题。
以下回答由chatgpt基于相关博客总结生成:
解决方案:
要更改背景图片的位置，可以使用背景属性(background-position)来设置。在这个问题中，背景图片的位置被设置为center center，这意味着图片会水平和垂直居中。如果你想要自定义图片的位置，可以像下面这样修改代码：
```
<style> 
    .bg {
        background: url(bg.jpg) no-repeat;
        background-position: top right; // 将背景图片位置设置为顶部和右侧
    }
</style>
```
至于在页面上添加音频和视频文件，你可以使用HTML5的<audio>和<video>元素。想要在页面上添加音频，可以像这样使用<audio>元素：
```
<audio src="audio.mp3" controls></audio>
```
src属性指定了音频文件的路径，controls属性会添加一个带有播放、暂停和音量控制的默认音频播放器。
同样的，想要在页面上添加视频，可以使用<video>元素：
```
<video src="video.mp4" controls></video>
```
src属性指定了视频文件的路径，controls属性会添加一个带有播放、暂停和时间控制的默认视频播放器。
请注意，音频和视频文件的路径应该是正确的，可以是本地文件路径或者网络路径。
希望这些信息对你有帮助。如果你还有其他问题，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^