Html Safari背景图像问题_Html_Css

Html Safari背景图像问题

html css

Html Safari背景图像问题,html,css,Html,Css,除了mac上的safari，我可以让我的背景图像填充所有浏览器。我以前在背景图像方面遇到过一些问题，我最终想弄明白这一点。如果有一个“行业标准”可以让背景图像适合所有浏览器，或者专门为某个浏览器设计页面，并根据用户拥有的浏览器显示某些页面，我想知道这是什么技术。而且，当我在safari中打开我的页面时，所有内容都会以某种方式向左移动。我一直在努力解决这个问题，但我发现其他人也有同样的问题。如果有人能给我一个解决这些问题的方法，那就太棒了。下面是我的html和css的代码 HTML: &l

除了mac上的safari，我可以让我的背景图像填充所有浏览器。我以前在背景图像方面遇到过一些问题，我最终想弄明白这一点。如果有一个“行业标准”可以让背景图像适合所有浏览器，或者专门为某个浏览器设计页面，并根据用户拥有的浏览器显示某些页面，我想知道这是什么技术。而且，当我在safari中打开我的页面时，所有内容都会以某种方式向左移动。我一直在努力解决这个问题，但我发现其他人也有同样的问题。如果有人能给我一个解决这些问题的方法，那就太棒了。下面是我的html和css的代码

HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="home.css" /> 

</head>
<body>

<div class="container">

<div class="logo">
<img src="IB SportsTV Logo.png" width="240px" height="180px"/>
</div>


<p class="teaser">July 24th</p>


</div>
</body>
</html>


7月24日

CSS:


@导入url（“reset.css”）；
html
{
填充：0；
保证金：0；
}
身体
{
背景图片：url（“HomeIBSTVBG.png”）；
背景大小：100%；
背景重复：无重复；
背景色：黑色；
}
.集装箱
{
宽度：73.2米；
保证金：0自动；
位置：相对位置；
}
.登录
{
位置：绝对位置；
顶部：50px；
右：100px；
颜色：白色；
字体系列：图拉真专业版；
}
登记
{
位置：绝对位置；
顶部：300px；
右：100px；
}
.文本
{
颜色：白色；
字体大小：20px；
字体大小：粗体；
字体系列：图拉真专业版；
}
标志
{
位置：绝对位置；
顶部：-20px；
左：100px；
}
.盒子
{
位置：绝对位置；
顶部：20px；
左：15px；
溢出：隐藏；
宽度：470px；
高度：310px；
}
.boxtext
{
位置：绝对位置；
底部：-300px；
宽度：470px；
高度：310px；
字体大小：25px；
字体系列：图拉真专业版；
颜色：白色；
}
.twitterfeed
{
位置：绝对位置；
顶部：240px；
左：100px；
}
/*memberpage框属性*/
.游戏盒
{
位置：绝对位置；
顶部：150px；
右：100px；
}
.排行榜
{
位置：绝对位置；
顶部：165px；
左：100px；
}
.viewerspotbox
{
位置：绝对位置；
顶部：370px；
左：93px；
}
/*选择页面属性*/
.mainform
{
位置：绝对位置；
顶部：150px；
左：100px；
颜色：白色；
字体系列：图拉真专业版；
边框：实心深蓝色；
背景颜色：蓝色；
}
.表格2
{
位置：绝对位置；
顶部：150px；
右：400px；
颜色：白色；
字体系列：图拉真专业版；
边框：实心深蓝色；
}
.表格3
{
位置：绝对位置；
顶部：500px；
右：400px；
颜色：白色；
字体系列：图拉真专业版；
边框：实心深蓝色；
}
.表格4
{
位置：绝对位置；
顶部：850px；
右：400px；
颜色：白色；
字体系列：图拉真专业版；
边框：实心深蓝色；
}
.表格5
{
位置：绝对位置；
顶部：1200px；
右：400px；
颜色：白色；
字体系列：图拉真专业版；
边框：实心深蓝色；
}
/*排行榜表格属性*/
.桌子头
{
颜色：白色；
字体系列：图拉真专业版；
背景颜色：蓝色；
边框颜色：深蓝色；
}
.表格内容
{
颜色：白色；
文本对齐：左对齐；
字体系列：图拉真专业版；
背景色：透明；
边框颜色：深蓝色；
}
.桌位
{
位置：绝对位置；
顶部：250px；
左：150px；
}
说明文字
{
标题侧：底部；
颜色：白色；
字体大小：42px；
字体系列：图拉真专业版；
}
/*摘要文本*/
.挑逗者
{
颜色：黑色；
字体系列：图拉真专业版；
字体大小：72px；
位置：绝对位置；
左：450px；
顶部：250px；
}

尝试为html添加宽度和高度，以使正文具有可继承性：

html {
    width: 100%;
    height: 100%;
}

对我来说，整页背景或视频都很有用

html {
    width: 100%;
    height: 100%;
}