div background not full size, only size of text

Question

I am currently making a web page (using react.js) 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: app.js

<div className="header">
    <h1 className="title">blah blah blah</h1>
    <h4 className="greeting">blah blah blah</h4>
</div>

app.css

.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%;
}

I have tried adjusting the height to 100%, 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.

try: background-size: auto, auto; OR background-size: contain; — tech2017, May 23 '17 at 13:59
it's because you use `background-size:cover` - it means the background will be resized to be large enough to "cover" the area. Did you also give html and body (and any other ancestors) a height when you gave your header a height — Pete, May 23 '17 at 13:59
what does full size mean? the div height is the height of the text. What height do you want it to be? — joshua miller, May 23 '17 at 13:59
`className="header"` is this react thing or should be `class="header"` — Dalin Huang, May 23 '17 at 14:00
@tech_Love that did not appear to make much of a difference. — , May 23 '17 at 14:01
yeah you also need to give html and any other ancestors of header a size too, if you only added it to body, the height for header definitely won't work - https://stackoverflow.com/questions/7049875/height-100-not-working — Pete, May 23 '17 at 14:04
@joshuamiller I would like the image to be `100%` size while keeping the proportions of the browser window and place text over the image. — , May 23 '17 at 14:04
@Pete `header` has no ancestors, it is the first div of the page. — , May 23 '17 at 14:05

score 1 · Answer 1 · answered May 23 '17 at 14:01

1

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");
}

reference: https://css-tricks.com/perfect-full-page-background-image/

answered May 23 '17 at 14:01

Patrick Sampaio

390
2
13

This places the background over the entire page, not just the desired `div`. – May 23 '17 at 14:09

aannecchiarico · Answer 2 · 2017-05-23T14:03:39.473

0

Target the html if you want a full page background.

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

edited May 23 '17 at 14:03

answered May 23 '17 at 14:01

aannecchiarico

197
6

1

.html is an css selector an class, i think that you mean html – Patrick Sampaio May 23 '17 at 14:02
Yes thanks for that @PatrickSampaio – aannecchiarico May 23 '17 at 14:03

score 0 · Answer 3 · answered May 23 '17 at 14:02

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

Here are some options

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

Dalin Huang · Accepted Answer · 2017-05-23T14:12:39.443

0

use 100vh as viewport (100% of screen height)

REF: https://www.w3schools.com/css/css_rwd_viewport.asp

use the following to remove default margin from body and h1.

body, h1{
  margin: 0;
}

.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;
}

<div class="header">
  <h1 className="title">blah blah blah</h1>
  <h4 className="greeting">blah blah blah</h4>
</div>

edited May 23 '17 at 14:12

answered May 23 '17 at 14:02

Dalin Huang

11,212
5
32
49

This helps, however the image is now far too wide and only 20% vertically of the image is shown. – May 23 '17 at 14:07
@JakeOrben ok updated – Dalin Huang May 23 '17 at 14:12
That appears to have worked! – May 23 '17 at 14:14

score 0 · Answer 5 · answered May 23 '17 at 14:05

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

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%;
}

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 height: 100vh; which makes div 100% relative to client screen

score 0 · Answer 6 · answered May 23 '17 at 14:05

Just put the background on the body:

.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%;
}

  <body class = "background">
    <div class="header">
      <h1 class="title">blah blah blah</h1>
      <h4 class="greeting">blah blah blah</h4>
    </div>
  </body>

https://plnkr.co/edit/DDmWdwViw8aKI36EwOKM?p=preview

div background not full size, only size of text

6 Answers6