blocks|key|619593|text|使用CSS+background-image属性而不是实际的img|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|619594|body{
++background:url(bg.jpg)+no-repeat;
++background-size:cover+!important;
}|code-block|syntax|javascript|619595|您还会发现使用背景而不是img来操作其他页面元素要容易得多|619596|entityMap^0|6|G|U|3|0|0|C|3|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

Use the CSS <code>background-image</code> property instead of an actual <code>img</code>

<pre><code>body{
 background:url(bg.jpg) no-repeat;
 background-size:cover !important;
}
</code></pre>

You'll also find it a lot easier to manipulate your other page elements with a background instead of <code>img</code>

blocks|key|2791649|text|HTML元素(根)必须至少有min-height:100%25|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2791650|所以标记|2791651|<html+style="min-height:100%25;+padding:0;+margin:0;">
++++<body+style="margin:0;+padding:0;+height:100%25;">+</body>
</html>|code-block|syntax|javascript|2791652|哦，是的，一旦经过测试，就会将这些内联样式提取到样式表中。|2791653|希望这能有所帮助。|2791654|编辑|BOLD|2791655|这是你能做的最好的|2791656|css：|2791657|body+{
++++/*background-attachment:+scroll;*/
++++/*background-clip:+border-box;*/
++++background-color:+rgba(0,+0,+0,+0);
++++background-image:+url("bg.jpg");
++++/*background-origin:+padding-box;*/
++++background-position:+center+center;
++++background-repeat:+no-repeat;
++++background-size:+cover;
++++font-family:+'PetitaBold';
}|2791658|entityMap^0|E|F|0|0|0|0|0|0|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|17|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|18|8|@$9|19|A|1A|B|S]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1B|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1C|8|@]|D|@]|E|$]]|$1|X|3|Y|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|Z|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|10|$]]

HTML element ( root ) must have atleast <code>min-height:100%</code>

so Markup

<pre><code>&lt;html style="min-height:100%; padding:0; margin:0;"&gt;
 &lt;body style="margin:0; padding:0; height:100%;"&gt; &lt;/body&gt;
&lt;/html&gt;
</code></pre>

oh and yea, once tested, extract those inline styles to a stylesheet

Hope that helps.

Edit

heres the best you can do

css:

<pre><code>body {
 /*background-attachment: scroll;*/
 /*background-clip: border-box;*/
 background-color: rgba(0, 0, 0, 0);
 background-image: url("bg.jpg");
 /*background-origin: padding-box;*/
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
 font-family: 'PetitaBold';
}
</code></pre>

blocks|key|619637|text|我是在js的帮助下这么做的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|619638|function+updateSize()+{
++++var+width+=+$(window).width();
++++var+height+=+$(window).height();

++++$('.image-con').css('width',+width);
++++$('.image-con').css('height',+height);
};
$(document).ready(updateSize);
$(window).resize(updateSize);|code-block|syntax|javascript|619639|和CSS|619640|.image-con+{
++++background-image:+url(bg.jpg);
++++background-repeat:+no-repeat;
++++background-size:+100%25+100%25;
}|619641|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I am doing it with the help of js.

<pre><code>function updateSize() {
 var width = $(window).width();
 var height = $(window).height();

 $('.image-con').css('width', width);
 $('.image-con').css('height', height);
};
$(document).ready(updateSize);
$(window).resize(updateSize);
</code></pre>

And CSS

<pre><code>.image-con {
 background-image: url(bg.jpg);
 background-repeat: no-repeat;
 background-size: 100% 100%;
}
</code></pre>

I am stuck at something.
I need to create a single page website with full width background image, but the image gets cut at each sides when open in the website.

The website is live at <a href="http://johnsonorchid.com/" rel="nofollow">here</a>

Currently I am using backstretch. But I have tried with with 100% and custom CSS then effect is either same or worse. Even used cover as background-size.

Is there any way to fix this so that the image should open correctly at mobile?

Full width responsive website body image

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我被困在什么东西上了。我需要创建一个单一页面的网站与全宽度背景图像，但图像被削减在每一边打开时，在网站。该网站在现场直播目前，我正在使用后伸。但我已经尝试了与100%和自定义CSS，然后效果要么是相同的或更糟。甚至用封面作为背景尺寸。有没有办法解决这个问题，以便图像应该在移动时正确打开？

问全宽响应网站体像
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问全宽响应网站体像EN