在不同设备上显示背景图像

时间:2018-09-22 08:28:53

标签: css

enter image description here我只有一张图像,https://dummyimage.com/fullbanner。以下是要求。

https://jsfiddle.net/moorthy/ygn0Ldbw/1/

1)我想在页脚中重复100%宽度的背景图像。

2)我想根据浏览器的宽度和设备的宽度显示不同设备的图像而不会剪切/剪切。

我尝试使用以下代码和具有不同像素的不同媒体查询来实现此目的,但我无法获得预期的结果。对于某些像素和浏览器调整大小期间,图像的某些部分将被裁剪。

我尝试了媒体查询320,480,600,768,900,1024,1200 .. px,但背景图像未正确覆盖所有px。

是否可以在不同的设备上正确显示相同的图像?我尝试使用具有不同值(例如Cover和Contain)的background-size,但无法正常工作。

例如

<div id="container">
    <div id="myPattern"></div>
</div>

#container{
    width:100%;
    height:71px;
    background-color:black;
    left: 0;
    bottom: 0;
    position : fixed;
}

#myPattern
{
    height: 100%;
    background-image: url("https://dummyimage.com/fullbanner");
    background-repeat: repeat-x;
    background-size: auto;
    background-position: left;
}

1 个答案:

答案 0 :(得分:1)

您应该使用EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' EMAIL_HOST = 'smtp.gmail.com' # mail service smtp EMAIL_HOST_USER = 'sdfrsfr' # email id EMAIL_HOST_PASSWORD = 'fdsgfd' #password EMAIL_PORT = 587 EMAIL_USE_TLS = True DEFAULT_FROM_EMAIL = 'sdfsd@gmail.com' 而不是background-size: contain;