CODEWITHSUNDEEP
htmlcss
Giulio
Giulio

Reputation: 3

Text doesn't display over an image

i'm trying to display a simple test over an image aligned at the centre with html and css but the text doesn't appear! This is the project link: https://jsfiddle.net/enex/j1an8dh7/

HTML:

<div id="bg">
  <img src="http://oi62.tinypic.com/169nx8g.jpg" alt="">
   <p> display this text over the image </p>
</div>

CSS:

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

Upvotes: 0

Views: 194

Answers (4)

Adimax
Adimax

Reputation: 11

You could try to make that image the background of the div and simply write like you world on a normal blank white background.

<div id="bg" background="http://oi62.tinypic.com/169nx8g.jpg">
    <p> display this text over the image </p>
</div>

you could also include the picture inside your app's root directory of make a directory for pictures and link that instead of a http link.(makes it easier to understand)

for example, you create a folder pictures in which you add a picture with a dog which you name dog.jpg, the adress of the picture will be: "/pictures/dog.jpg"

Upvotes: 1

Stickers
Stickers

Reputation: 78676

Agreed background is the best option if acceptable.

https://jsfiddle.net/j1an8dh7/12/

#bg {
    background: url("http://oi62.tinypic.com/169nx8g.jpg") center center no-repeat;
    background-size: cover;
}

Upvotes: 0

Jesper
Jesper

Reputation: 3834

This can work.

<html>
<style type="text/css">
    img {
        position: absolute;
    }

    .text {
        color: lightgreen;
        position: absolute;
    }
</style>
<div id="bg">
    <img src="http://oi62.tinypic.com/169nx8g.jpg" alt=""/>
    <div class="text">display this text over the image</div>
</div>
</html>

This can work too.

<html>
<style type="text/css">
    .text {
        width: 100%;
        height: 100%;

        background: url('http://oi62.tinypic.com/169nx8g.jpg');

        color: lightgreen;
    }
</style>
<div id="bg">
    <div class="text">display this text over the image</div>
</div>
</html>

It's your choice, the easiest way is to set a background image :)

Upvotes: 1

Alex
Alex

Reputation: 357

https://jsfiddle.net/j1an8dh7/4/

I changed the <p> into a <h2> in your HTML
And I tweaked the element <h2> in your CSS.

I hope this is what you want. Cheers

PS: Please don't be shy to provide the points :)

Upvotes: 0

Related Questions