image keeps disappearing when making my page/view smaller

Question

My background image keeps disappearing whenever the screen gets smaller. I want to make it responsive.

This is what I have for my CSS code:

#heading {
  text-align: center;
  color: white;
  background: url('#someimage') top center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size:cover; 
  margin-bottom: 0 !important;
}

This what I have for my HTML Code

<header>
    <div class="jumbotron text-center" id="heading">
        <div class="container intro-text">
        <div class="row">
        <div class="main col-xs-12">
            <h1>Name</h1>
            <hr class="separator separator-light">
            <h2 class="subhead">Name <i class="fa fa-laptop"></i> Name <i class="fa fa-lightbulb-o"></i> Name</h2>
            </div>
            </div>
        </div>
    </div>
</header>

it still is disappearing when the screen gets smaller after adding this — lalaknowles, Jun 30 '16 at 12:38
I also have a nav bar at the top before the image, I tried the code like it is with a random image and it works without the navbar. There must be something wrong with my navbar code that is interfering with the image — lalaknowles, Jun 30 '16 at 12:45

score 1 · Answer 1 · answered Jun 30 '16 at 12:48

1

Please try to add "background-size:100%" instead of "background-size:cover"

answered Jun 30 '16 at 12:48

vignesh

951
5
13

image keeps disappearing when making my page/view smaller

1 Answers1