blocks|key|2594211|text|如果您想要一个完整的页面背景，请将html作为目标。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2594212|html+{
++++background:+url("./blah.png");
+++-webkit-background-size:+cover;
+++-moz-background-size:+cover;
+++-o-background-size:+cover;
+++background-size:+cover;
}|code-block|syntax|javascript|2594213|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Target the html if you want a full page background.</p>

<pre><code>html {
    background: url("./blah.png");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
</code></pre>


blocks|key|3585334|text|html+{+
++background:+url(images/bg.jpg)+no-repeat+center+center+fixed;+
++-webkit-background-size:+cover;
++-moz-background-size:+cover;
++-o-background-size:+cover;
++background-size:+cover;
++background:+url("./blah.png");
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3585335|参考资料：https://css-tricks.com/perfect-full-page-background-image/|unstyled|offset|length|3585336|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/perfect-full-page-background-image/^0|0|5|1M|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background: url("./blah.png");
}
</code></pre>

<p>reference: <a href="https://css-tricks.com/perfect-full-page-background-image/" rel="nofollow noreferrer">https://css-tricks.com/perfect-full-page-background-image/</a></p>


blocks|key|3585379|text|不能这样做，元素不能动态地调整到背景大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3585380|这里有一些选择|3585381|使用<img>-tag插入图像，将h1和h4与position:+absolute放在一起|unordered-list-item|offset|length|style|CODE|3585382|手动将标题调整到图像的高度：height:+300px|3585383|使图像缩小到div：background-size:+contain的大小|3585384|entityMap^0|0|0|2|5|N|I|0|E|D|0|A|O|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@$G|T|H|U|I|J]|$G|V|H|W|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|X|8|@$G|Y|H|Z|I|J]]|9|@]|A|$]]|$1|M|3|N|5|F|7|10|8|@$G|11|H|12|I|J]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$]]

<p>It can't be done like that, the element cannot be adjusted to the background size dynamically.</p>

<p>Here are some options</p>

<ul>
<li>Insert the image with an <code>&lt;img&gt;</code>-tag, place the h1 and h4 on top of it with <code>position: absolute</code></li>
<li>Adjust the header to the height of the image manually: <code>height: 300px</code></li>
<li>make the image shrink to the size of the div: <code>background-size: contain</code></li>
</ul>


blocks|key|2594298|text|使用100+as作为视口(屏幕高度的100%25)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2594299|参考文献：viewport.asp|blockquote|offset|length|2594300|使用以下方法可以从body和h1中删除默认的页边距。|2594301|body,+h1{
++margin:+0;
}|code-block|syntax|javascript|2594302|​|2594303|.header+{
++background:+url("http://placehold.it/1920x1080");
++position:+relative;
++background-position:+center+center;
++background-size:+cover;
++background-repeat:+no-repeat;
++outline:+0;
++display:+block;
++text-align:+center;
++color:+lemonchiffon;
++height:+100vh;
++margin:+0;
}

body,+h1{
++margin:+0;
}|2594304|<div+class="header">
++<h1+className="title">blah+blah+blah</h1>
++<h4+className="greeting">blah+blah+blah</h4>
</div>|2594305|2594306|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/css/css_rwd_viewport.asp^0|0|5|C|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@$E|14|F|15|1|16]]|A|$]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|18|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|6|7|19|8|@]|9|@]|A|$]]|$1|P|3|Q|5|K|7|1A|8|@]|9|@]|A|$L|M]]|$1|R|3|S|5|K|7|1B|8|@]|9|@]|A|$L|M]]|$1|T|3|O|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>use 100vh as viewport (100% of screen height)</p>

<blockquote>
  <p>REF: <a href="https://www.w3schools.com/css/css_rwd_viewport.asp" rel="nofollow noreferrer">https://www.w3schools.com/css/css_rwd_viewport.asp</a></p>
</blockquote>

<p>use the following to remove default margin from body and h1.</p>

<pre><code>body, h1{
  margin: 0;
}
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
  background: url("http://placehold.it/1920x1080");
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  outline: 0;
  display: block;
  text-align: center;
  color: lemonchiffon;
  height: 100vh;
  margin: 0;
}

body, h1{
  margin: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
  &lt;h1 className="title"&gt;blah blah blah&lt;/h1&gt;
  &lt;h4 className="greeting"&gt;blah blah blah&lt;/h4&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3585420|text|当您想要制作完整的背景时，您的div也应该是全高度，因为height:100%25相对于父级的高度，您应该使父级也是height:100%25，另一种选择是您可以使用|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3585421|body{
++++background:+url("./blah.png");
++++position:+relative;
++++background-size:+cover;
++++background-position:+center+center;+//added+line
++++background-repeat:+no-repeat;
++++outline:+0;
++++display:+block;
++++text-align:+center;
++++color:+lemonchiffon;
++++min-height:+100%25;
}
html{
++++min-height:100%25;
}|code-block|syntax|javascript|3585422|这会使你的html标签达到100%25的高度，至少和你的身体一样。如果您只想使特定元素100%25高，我建议您使用height:+100vh;，它使div相对于客户端屏幕100%25|3585423|entityMap^0|S|B|1K|B|0|0|1H|E|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|$]]

<p>when you want to make full background your div should also be full height
since <code>height:100%</code> relative to parent's height you should make parent also <code>height:100%</code>
one alternative is that you can use</p>

<pre><code>body{
    background: url("./blah.png");
    position: relative;
    background-size: cover;
    background-position: center center; //added line
    background-repeat: no-repeat;
    outline: 0;
    display: block;
    text-align: center;
    color: lemonchiffon;
    min-height: 100%;
}
html{
    min-height:100%;
}
</code></pre>

<p>which strecth your html tag to 100% height at minimum as well as your body. If you want only make a specific element 100% height I suggest you to use <code>height: 100vh;</code> which makes div 100% relative to client screen</p>


blocks|key|3585429|text|把背景放在body上|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3585430|.background+{
++background:+url("http://images.all-free-download.com/images/graphiclarge/black_texture_texture_background_06_hd_pictures_169901.jpg");
}

.header+{
++++position:+relative;
++++background-size:+cover;
++++background-repeat:+no-repeat;
++++outline:+0;
++++display:+block;
++++text-align:+center;
++++color:+lemonchiffon;
++++height:+100%25;
}

++<body+class+=+"background">
++++<div+class="header">
++++++<h1+class="title">blah+blah+blah</h1>
++++++<h4+class="greeting">blah+blah+blah</h4>
++++</div>
++</body>|code-block|syntax|javascript|3585431|https://plnkr.co/edit/DDmWdwViw8aKI36EwOKM?p=preview|3585432|entityMap|0|LINK|mutability|MUTABLE|url^0|5|4|0|0|0|1G|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

<p>Just put the background on the <code>body</code>:</p>

<pre><code>.background {
  background: url("http://images.all-free-download.com/images/graphiclarge/black_texture_texture_background_06_hd_pictures_169901.jpg");
}

.header {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    outline: 0;
    display: block;
    text-align: center;
    color: lemonchiffon;
    height: 100%;
}

  &lt;body class = "background"&gt;
    &lt;div class="header"&gt;
      &lt;h1 class="title"&gt;blah blah blah&lt;/h1&gt;
      &lt;h4 class="greeting"&gt;blah blah blah&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/body&gt;
</code></pre>

<p><a href="https://plnkr.co/edit/DDmWdwViw8aKI36EwOKM?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/DDmWdwViw8aKI36EwOKM?p=preview</a></p>


<p>I am currently making a web page (using <code>react.js</code>) and I am attempting to implement a background. I would like the background to be its full size, however it is only the size of the text inside of the div with it.
Here is the code I am currently using:
<code>app.js</code></p>

<pre><code>&lt;div className="header"&gt;
    &lt;h1 className="title"&gt;blah blah blah&lt;/h1&gt;
    &lt;h4 className="greeting"&gt;blah blah blah&lt;/h4&gt;
&lt;/div&gt;
</code></pre>

<p><code>app.css</code></p>

<pre><code>.header {
    background: url("./blah.png");
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    outline: 0;
    display: block;
    text-align: center;
    color: lemonchiffon;
    height: 100%;
}
</code></pre>

<p>I have tried adjusting the <code>height</code> to <code>100%</code>, however it only makes the image slightly larger. I would also like to say that the width is correct, my only issue is with getting the height to be proper.</p>


div background not full size, only size of text

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我目前正在制作一个网页(使用react.js)，并试图实现一个背景。我希望背景是它的全部大小，但它只是与它的div内的文本大小。下面是我目前使用的代码：app.js<div className="header">    <h1 className="title">blah blah blah</h1>    <h4 c...

问div背景不全尺寸，仅为文本大小
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问div背景不全尺寸，仅为文本大小EN