如何使标题图像响应？ | 如何使标题图像响应

本文介绍了如何使标题图像响应？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经为我的网站添加了一个标题图片：

  #header_area {
 background：url my_header_image.com'）; 
 background-repeat：no-repeat; 
 background-position：top center; 
}

我的网站响应，除了标题。

解决方案

当做一个背景图像响应时，您可以使用 background-size 属性。在上面的代码的情况下，只要你的 #header_area 元素有一个隐含的宽度（或明确的一组与媒体查询），你应该能够说：

  #header_area {
 background：url（'my_header_image.com'）; 
 background-repeat：no-repeat; 
 background-position：top center; 
 background-size：100％; 
}

I have added a header image to my site with:

#header_area {
    background: url('my_header_image.com');
    background-repeat:no-repeat;
    background-position: top center;
}

My site is responsive except the Header.

Is there a way to make my header responsive?

解决方案

When making a background-image responsive, you can use the background-size property. In the case of the above code, so long as your #header_area element has an implicit width (or an explicit one set with media queries), you should be able to say:

#header_area {
    background: url('my_header_image.com');
    background-repeat:no-repeat;
    background-position: top center;
    background-size: 100%;
}

这篇关于如何使标题图像响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！