0

Adding a background image to a DIV. Image must have low opacity, but the other elements in the DIV must have normal opacity.

jsFiddle of my code

I was following this SO answer (answer's Codepen is here).

However, I must be doing something wrong (knowing me, something painfully obvious). Can anyone spot my mistake, or suggest the solution?

In case my above jsFiddle someday disappers, here is my code:

HTML:

<div id="loginFormDIV">
    <div id="headerDIV">
        <p>Login Please</p>
    </div>
    <div id="formDIV">
        <div id="fd_loginDIV">
            <p>Login ID:</p>
            <input id="fd_login" type="text" />
        </div>
        <div id="fd_pwordDIV">
            <p>Password:</p>
            <input id="fd_pword" type="password" />
        </div>
        <div id="fd_submitDIV">
            <input id="fd_submit" type="button" value="Submit" />
        </div>
    </div>
</div><!-- #loginForm -->

CSS:

* { margin: 0; padding: 0; outline: 0 }
html {min-height:100%;margin-bottom:1px;font-size: 62.5%;background:#eaeaea;}
h1, h2, h3 {color:#f1f0ee;font-family:Segoe UI Light, Arial, Verdana, Geneva, sans-serif;font-family:"Segoe UI light","Segoe UI";}
h1 {font-size:2.5em;font-weight:normal;border-bottom:0px solid #c6beaa;padding-bottom:25px;}

#loginFormDIV {height:250px;width:400px;position:absolute;left:30%;font-size:1.6em;z-index:10;}

#headerDIV {height:40px;width:100%;background:white;}
#formDIV   {height:210px;width:100%;position:relative;}
#formDIV:after{content:'';display:block;position:absolute;top:0;left:0;background:url(http://placekitten.com/400/250);background-size:cover;opacity:0.2;z-index:-2;}
    #fd_loginDIV  {height:35%;width:80%;margin:0 auto;border:1px solid blue;}
    #fd_pwordDIV  {height:35%;width:80%;margin:0 auto;border:1px solid red;}
    #fd_submitDIV {height:25%;width:35%;float:right;border:1px solid orange;}
    #fd_loginDIV p{}
    #fd_pwordDIV p{}
    #fd_login     {height:40px;width:60%;}
    #fd_pword     {height:40px;width:60%;}
    #fd_submit    {}
Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • Your mistake can be found easily with Chrome dev tools. You should learn to use it, it will save you lots of work. – vals May 19 '14 at 05:34
  • @vals - Great comment and much appreciated. I use Chrome dev tools often, but don't know how to use it to find this answer. Could you point me in the right direction? – cssyphus May 19 '14 at 17:01

2 Answers2

3

How to use Chrome dev tools to find out the problem:

fiddle in dev tools

In the elements pane, find and select the :after pseudo-element

In the view pane, a tooltip appears. It indicates the element id, and the size: 0px x 0px. That's why it is not visible.

vals
  • 61,425
  • 11
  • 89
  • 138
  • Thank you! I did not notice that - and I'm in dev tools embarrassingly often. Very much appreciate this answer. I look forward to reading your answers to other questions and upvoting any I find helpful. – cssyphus May 19 '14 at 22:31
1

Add:

width: 100%;
height: 100%;

to #formDIV:after.

As a side note, having readable code is very important, especially for debugging. Use new lines, spaces, indentation and comments generously!

Alon Dahari
  • 1,138
  • 1
  • 9
  • 27
  • Well, I knew it had to be obvious and, not surprisingly, painfully so. I had assumed that `background:cover;` did the same thing. I tried dozens of other permutations, but never the very ones I omitted from the example code, so sure was I in my ass/umption. Thanks! – cssyphus May 19 '14 at 17:05
  • `background:cover;` makes sure the background you set for the element covers all the available space, it doesn't set any dimensions for it though... you just have to remember that pseudo-elements start out as empty divs do... – Alon Dahari May 20 '14 at 00:55