CODEWITHSUNDEEP
javascripthtmlcssangular
TexasState Han
TexasState Han

Reputation: 53

why doesn't my image show on angular 2/4 css?

Im doing a hero image for my angular website and the image is not showing up. I don't know why

My html

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">I am John Doe</h1>
    <p>And I'm a Photographer</p>
    <button>Hire me</button>
  </div>
</div>

My css

.hero-image {
   background-image: url("https://newsi.creativecow.com/i/879292/2.jpeg");
   height: 50%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
}

.hero-text {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: black;
}

Upvotes: 0

Views: 420

Answers (2)

Pablo Cesar Cordova Morales
Pablo Cesar Cordova Morales

Reputation: 1138

Well,I dont know very well what you want to do after, but one solution is write your div-class hero-image as absolute position, but for this case I guess that the reference will be the body and I dont know if you want that solution, and another thing is write width: 100%;

summary:

.hero-image {
 background-image: url("https://newsi.creativecow.com/i/879292/2.jpeg");
 height: 100%;
 width: 100%;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: absolute;
}

Upvotes: 0

Amarnath Reddy Dornala
Amarnath Reddy Dornala

Reputation: 189

Attribute height 50% won't work unless there is text in there first div tag. Create an image tag inside div.

Hope this helps:

.hero-image {
   background-image: url("https://newsi.creativecow.com/i/879292/2.jpeg");
   height: 500px; /* Change Accordingly */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
}

.hero-text {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
}
<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">I am John Doe</h1>
    <p>And I'm a Photographer</p>
    <button>Hire me</button>
  </div>
</div>

You can not give height as % in above case. You should inherit it.

Upvotes: 1

Related Questions