调整窗口大小时重复背景图像

我想创建一个具有背景图像的页面，在header和footer之间可以在任何屏幕大小上工作。调整窗口大小时重复背景图像

我设法创建了页面，并且它在桌面屏幕上工作正常。我遇到的问题是当我调整到mobile size screen，然后重复背景。

这里是我的代码：

div { 
    width: 100%; 
    height: 5886px; 
    background-image: url('services-yellow.jpg'); 
    background-size: 100% auto; 
    background-repeat: none; 
    border: none; 
}

设立在特定高度的高度属性，但我不知道我怎么可以改变这种做法，它适用于所有的屏幕尺寸。

该网站可浏览：http://s116169771.websitehome.co.uk/testsite/

如果有人能请告知我怎么能解决这个问题，将不胜感激。

在此先感谢。

来源

2016-08-09 user3191160

none对于background-repeat不是有效值，请改为使用no-repeat。

背景重复属性（MDN）（W3Schools）

来源

2016-08-09 07:16:01 Error404

变化background-repeat: none;到background-repeat: no-repeat;none不是background-repeat属性的有效值。

你的代码应该是：

div { 
    width: 100%; 
    height: 5886px; 
    background-image: url('services-yellow.jpg'); 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    border: none; 
}

您还可以使用速记CSS background属性，如下所示：

div { 
    width: 100%; 
    height: 5886px; 
    background: url('services-yellow.jpg') no-repeat 100% auto; 
    border: none; 
}

More Details

来源

2016-08-09 07:16:10

谢谢你们，真的很感谢所有的答案。顺便说一句，减少高度，因为现在我在底部有一个很大的空白。我需要添加一个媒体查询来控制这个吗？或者有没有办法在相同的代码中完成它？ – user3191160

@ user3191160更好地在'HTML'中使用'img'。把你的图像放在'div'里面，像'div img {display：block;身高：自动;宽度：100％;''从'div'中移除'height'。 –

谢谢你穆罕默德，这工作，但即时猜测这将无法正常工作，如果我要在图像的顶部添加文字，因为这将不再在图像的顶部.. – user3191160

可能值Here is a list为背景重复，你需要：

background-repeat: no-repeat;

这个属性并不存在。

来源

2016-08-09 07:17:19 andreas

使用background-repeat:no-repeat

div { 
    width: 100%; 
    height: 5886px; 
    background-image: url('services-yellow.jpg'); 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    border: none; 
}

或者干脆短代码

div { 
    width: 100%; 
    height: 5886px; 
    background: url('services-yellow.jpg') no-repeat 100%; 
    border: none; 
}

来源

2016-08-09 07:17:39

调整窗口大小时重复背景图像

回答

相关问题