Question 208539 in Html Question posted in
Some basic documentation can be found here.

Html – How do I make a transparent text box over an image?

I’ve read so many articles on this but the code I’m using isn’t rendering inside its actual parent but in the div before it, I am so lost. The problem is simple: create a text box on the bottom of an image with a transparent background. The solution is beyond me I guess. You can see where the text box is rendering in the masthead which isn’t correct. My professor won’t answer so here I am lol. This link (http://space.wccnet.edu/~jwmorton/web110/layouts/layout5/) goes to the index page. My CSS is below…

/* Elements */
body {
    width: 1040px;
    margin: 0 auto;
    padding: 0;
}

h1 {
    font: 700 30px/1 "Roboto Slab",serif;
}
h2 {
    font: 700 17px/1.2 "Open Sans",serif;
}

p {
    font: 18px/1.2 "Open Sans",sans-serif;
    text-align: center;
}

/* Classes */
div.parent {
    position: relative;
    top: 0;
    left: 0;
}
div.parent2 {
    position: relative;
    bottom: 0;
    left: 0;
}
div.divTest {
    position: absolute;
    bottom: 0;
    width: 300px;
    background: rgba(0,0,0,0.4);
}

ul.navList1 {
    position: absolute;
    top: 15px;
    right: 20px;
    list-style: none;
    font: 700 15px/1.2 "Open Sans",sans-serif;
    color: #fff;
    margin: 0;
    padding: 0;
}

li.liLeftFloat {
    float: left;
    margin: 0px 16px;
}

/* IDs */
#masthead {
    position: relative;
    top: 0;
    left: 0;
}

#logo {
    position: absolute;
    top: 20px;
    left: 30px;
}

#headline {
    position: absolute;
    top: 75px;
    right: 50px;
}
#headlineP {
    position: absolute;
    top: 112px;
    right: 60px;
}

#montSaintAbbeyIMG {
    position: absolute;
    top: 20px;
    left: 20px;
}
#eileanDonanIMG {
    position: absolute;
    top: 20px;
    left: 360px;
}
#neuschwansteinIMG {
    position: absolute;
    top: 20px;
    right: 20px;
}

/*
#textBox1 {
    background: rgba(0,0,0,0.4);
    position: absolute;
    top: 253px;
    left: 20px;
    width: 320px;
    padding: 10px 10px 10px 5px;
    color: #fff;
}
#textBox2 {
    background: rgba(0,0,0,0.4);
    position: absolute;
    top: 253px;
    left: 360px;
    width: 320px;
    color: #fff;
}
#textBox3 {
    background: rgba(0,0,0,0.4);
    position: absolute;
    top: 253px;
    right: 20px;
    width: 320px;
    color: #fff;
}
*/

I’ve tried using several different wrappers like div and span, nothing has worked.

Tags:

3

Answers


  1. 0

    With your current setup (where lots of things are positioned absolutely) the most convenient thing to do would be this:

    div.divTest {
    /* ... */
    bottom: -320px;
    left: 20px;
    width: 320px;
}

    That will position the text on the bottom of #montSaintAbbeyIMG.

    Why bottom: 0; isn’t working is because it’s positioning the element at the bottom of the parent relative container (.parent2). .parent2 is positioned at the bottom of its parent, which is <body>.

    <body> doesn’t have the proper height of its children (blue box = <body> bounds) …

    does not take up the height of its children

    … because some of its children are positioned absolutely.

    In short, Mont Saint-Abbey was positioned at the bottom of <body>.

    Login or Signup to reply.
  2. 0

    Just add these additional CSS in your stylesheet and it will exactly look how you wanted it to be. I tested it.

    It wasn’t working because the .parent2 didn’t has a specified height. And for positioning of the text-box you need to add left: 20px to align with the image.

    div.parent2 {
    min-height: 320px;
}

div.divTest {
    left: 20px;
}
    Login or Signup to reply.
  3. 0

    You need to use opacity to set the transparency level 1.0 is zero transparency below this value is increasing transparency

        <div><img src="un-flag.jpeg" 
    style="width:4⁹0px; 
    height:250px;">
    <div style="opacity: 0.75">
    <p>Paragraph</>
    </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search