响应css背景图像 [英] Responsive css background images

问题描述

我有一个网站（g-floors.eu），我想做背景（在css我已经定义了一个bg图像的内容）也响应。不幸的是，我真的不知道如何做这个除了一件事，我可以想到，但它是一个解决方法。创建多个图像，然后使用CSS屏幕大小来更改图像，但我想知道是否有一个更实用的方法来实现这一点。

I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.

基本上我想实现是图像（具有水印'G'）自动调整大小而不显示较少的图像。如果可以的话

Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course

链接： g-floors.eu

代码我到目前为止（内容部分）

Code I have so far (content part)

#content   
{       
    background-image: url('../images/bg.png');        
    background-repeat: no-repeat;        
    position: relative;        
    width: 85%;            
    height: 610px;       
    margin-left: auto;      
    margin-right: auto;       
}   

推荐答案

根据浏览器窗口的大小进行缩放：

If you want the same image to scale based on the size of the browser window:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

不要设置宽度，高度或页边距。

Do not set width, height, or margins.

这篇关于响应css背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！