3

I'm stuck with this... My goal is this page:

enter image description here

I want to place text over an image, for example "STALDEN". I know how to do this, but when i use absolute positioning and insert a new entry the text is on the same position like to one before. How can I solve this better?

Any help much appreciated!

This is what i have:

<div class="karte">
      <img src="img/home/stalden.png" alt="">
      <h1>STALDEN</h1>
    </div>

CSS

.karte img {
  width: 100vw;
}


.karte h1 {
  position: absolute;
  top: 50px;
  left: 50px;
  color: white;
  font-family: "Teko", sans-serif;
  font-size: 15vw;
}
2
  • 1
    Why don't you use image as background?
    – niyasc
    Commented Jul 27, 2016 at 12:58
  • have you tried relative position?
    – Pirate
    Commented Jul 27, 2016 at 12:59

2 Answers 2

7

You can use image as background of your section

.karte {
  background: url('img/home/stalden.png');
}
<div class="karte">
  <h1>STALDEN</h1>
</div>

1
  • It's solution. Should be marked as answer, i think. Commented Jul 27, 2016 at 13:34
2

Try this:

.karte{
  position: relative;
}

.karte img{
 position: absolute;
 top: 0;
 left: 0;
}

.karte h1{
 position: absolute;
 top: 50px;
 left: 50px;
}

It's exactly that you ask. But it's better to use background-image here because of better semantic and other reasons... Just use background-image. It's better solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.