CODEWITHSUNDEEP
htmlcssbackground-imagebackground-color
neuquen
neuquen

Reputation: 4169

Cover background-image with transparent background-color

I'd like to place a transparent, blue background color over a background image, but I can't seem to get the color to overlay over the image.

UPDATE: I changed the margins so that the name takes up 70% and the margins 30%. However, it doesn't overlay over the two margins. (See updated fiddle)

Any ideas on how?

HTML:

<body>
  <div id="name">
      <h1 id="h" ><a href=#>H</a></h1>
      <h1 id="e" ><a href=#>E</a></h1>
      <h1 id="l" ><a href=#>L</a></h1>
      <h1 id="l2" ><a href=#>L</a></h1>
      <h1 id="o" ><a href=#>O</a></h1>
  </div>
</body>

CSS:

 body {
        font-family: 'Sigmar One', cursive;
        font-size: 75px;
        color: white;
        text-shadow: 5px 5px 5px #000;

        background-color:blue;
        background: url(http://placekitten.com/500/500) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 

        width: 100%;
        height: 100%;
        margin: 0;
    }

    div {
        position:absolute; 
        height:100%; 
        width: 70%;
                margin: 0 15% 0 15%;
        display: table;
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
        height: 1em;
        border: 1px solid black;
    }

    a {
        /*border: 1px solid black;*/
        display: inline-block;
        line-height: 100%;
        overflow: hidden;
    }

    a:visited, a:hover, a:active {
        text-decoration: none;
        color: white;
    }

    a:link {
        text-decoration: none;
        color: white;
        text-shadow: 3px -3px 0px black;
    }

    a:hover {
        text-shadow: 5px 5px 5px #000;
        color: white;
    }

FIDDLE: http://jsfiddle.net/dQy8A/2/

Upvotes: 1

Views: 3892

Answers (1)

amdorra
amdorra

Reputation: 1556

check this fiddle, i hope it helps.

i added a div inside your body

<div class = "overlay">
  <div id = "name">
  ....
  </div>
<div>

and set it's background color to background: rgba(0,0,255,0.5); where the last number is the opacity of the color

new css 

.overlay{
    background: rgba(0,0,255,0.5);
    margin: 0px;
    width: 100%;
    height: 100%;
}

you should remove the margins from the div.overlay and it will work

I also updated the link

P.S. you shouldn't set properties such as width and height and display to a div as it will affect all divs on the page and use classes instead of tag names to set those properties

Upvotes: 1

Related Questions