Grow your CSS skills. Land your dream job.

Background and Text

  • # April 19, 2013 at 12:14 am

    I know this is a trivial issue to some but this been kicking my butt the last couple of days . I need the Text to appear on top of the image but for some reason its seem to separate the container and the back ground image. my site is http://www.sumo-iq.com the css code im using so far is. i would really appreciate your help on this.

    html{

    min-height: 100%;

    background: #717171 url(‘../img/home-bg.jpg’) 100% 100% no-repeat;
    background: url(../img/iphone-hand.png) 100% 100% no-repeat ,#717171 url(‘../img/home-bg.jpg’) 100% 100% no-repeat;;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    body {

    body {
    min-height: 100%;
    font: 20px/1.4 ‘PT Sans’, sans-serif;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.66);

    background: transparent;

    }

    /*
    Text elements
    =================================================================*/

    .site-heading {
    margin-top: 100px;
    margin-bottom: 30px;

    font-size: 64px;
    line-height: 64px;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);

    }

    # April 19, 2013 at 12:18 am

    All you need:

    `body { background: transparent; }`

    Bootstrap sets body element background to white.

    # April 19, 2013 at 12:24 am

    @ Merri , i already have that code in my body tag still no dice

    # April 19, 2013 at 12:26 am

    You have two consecutive rows of `body {` so that breaks any following CSS from working.

    # April 19, 2013 at 12:29 am

    Merri ! got it thanks a bunch next round of drinks is on me!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".