CODEWITHSUNDEEP
htmlcss
Les Paul
Les Paul

Reputation: 1278

CSS: Element's relative size makes background-image disappear

I have a background-image that is 800x480 pixels. When my element has a fixed size I see the background-image, but not when the element has a relative size or a max-width.

Working CSS script

.audio-container, .settings-container {
  max-width:800px;
  height:480px;
  position:absolute;
  background-image:url("../../public/images/Audio/I_Audio_BGK.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

CSS script with no background image showing

.audio-container, .settings-container {
  width:100%;
  /* Same result with max-width */
  height:100%;
  position:absolute;
  background-image:url("../../public/images/Audio/I_Audio_BGK.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

What can I do to show the background-image yet have the element sizes relative to the browser window?

By request, here are the parent DIVs

<div ng-controller="MainController" class="main-guy">
    <div class="screen-inside">
        <div class="audio-container" ng-controller="AudioController">
        </div>
    </div>
</div>

Here are the parent DIV CSS styles

.main-guy { 
  position:absolute;
/* Same result if width and height are set to a fixed number */
  width: 100%;
  height: 100%;
  margin: auto;
} 
.screen-inside {
  margin:auto;
  position:relative;
  height:60%;
  width:66.66%;
}

Upvotes: 1

Views: 865

Answers (2)

M.Tanzil
M.Tanzil

Reputation: 1995

You have to change the position:absolute in .settings-container to position:relative as your image in this case act as a Child for .settings-container and the image should be according to its parent. So Position:absolute will not work.

Check the snippet

.main-guy { 
  position:absolute;
  width: 100%;
  height: 100%;
  margin: auto;
  background:#999;
} 
.screen-inside {
  margin:auto;
  position:relative;
  height:60%;
  width:66.66%;
  background-color:blue;
}

.audio-container, .settings-container {
  width:100%;
  /* Same result with max-width */
  height:100%;
  background-image:url(http://reservations.life/css/images/bg-01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position:absolute;
}
<div ng-controller="MainController" class="main-guy">
    <div class="screen-inside">
        <div class="audio-container" ng-controller="AudioController">
        </div>
    </div>
</div>

Upvotes: 1

Robert
Robert

Reputation: 6967

Using the following HTML:

<div class="settings-container"></div>

With the following CSS:

html, body { height: 100%; margin: 0; padding: 0; }

.settings-container {
  width: 100%;
  height: 100%;
  text-align: center;
  background-image: URL("your-image-here");
  background-repeat: no-repeat;
  background-size: cover;
}

Results in a background taking up 100% of the width and height of the viewport. It's difficult to solve your question properly without seeing the whole picture, but my guess is that you will need to apply height somewhere else in your document.

You may also run into issues with using position: absolute, but again that largely depends on the broader picture of how you're applying this to your site/application/whatever.

Upvotes: 1

Related Questions