CODEWITHSUNDEEP
htmlimagebackground-image
Jacob Osborne
Jacob Osborne

Reputation: 11

Background not appearing in div

I'm trying to add a banner image and adjust its size from the CSS. The IMAGE and the CSS are in the same folder, next to each another.

HTML

<body>
<header>

    <div class="banner"></div>

CSS 

div.banner {
background: url("games_header.jpg") no-repeat fixed center;
background-size: contain;
display: block;
margin: auto;
max-width: 100%;
height: 25%;

}

Upvotes: 0

Views: 28

Answers (3)

Victoria Le
Victoria Le

Reputation: 940

background is an inline attribute and would work with root elements such as html or body attributes if you set the background styling to <body>(just an example). Though it is not advised to use it on the html and body but a fixed position div with 100% width and height as shown below

.banner {
  background: url("https://picsum.photos/200") no-repeat fixed center;
  position: fixed;
  height: 100%;
  width: 100%;
}
<div class="banner"></div>

Upvotes: 0

Yintii
Yintii

Reputation: 43

I put it all in the html file I created and this works for my image that's in the same directory. You don't need to call it as div.banner, adding the class to the div is enough to just call it by what you name it. 

    <head>

    <style>
        .banner{
            height: 100%;
            background-image: url('./butterbot.jpg');
            background-repeat: no-repeat;
        }
    </style>


</head>
<body>
    <header>
        <div class="banner"></div>
    </header>
</body>

Upvotes: 0

Johannes
Johannes

Reputation: 67774

You have no content in that element, therefore its height is 0 => no visible background. Just add some content and the background will appear.

The height setting has no effect if the parent element doesn't have a set height. If you want the banner to be 25% of the window height, add this rule:

html, body {
  height: 100%;
}

Upvotes: 2

Related Questions