images positioning

  • Resolved mrcangrejero

    (@mrcangrejero)


    13 years, 3 months ago

    I am attempting to create my own wordpress template. Although not too advanced, the results so far can be seen at “cangrejero.com”. If you have the time to visit, you will see the image of a crab sitting in the top left corner. That image is set as follows:

    body
    {
    background-color:#4a4a21;
    background-image: url(‘images/crab.png’);
    background-repeat:no-repeat;
    }

    I am trying to get the image to show over the header and container DIVs, and hopefully have whatever text scrolls pushed to the right. Any guidance will certainly be appreciated. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Jarret

    (@jarretc)

    13 years, 3 months ago

    You need to place the image in the header div and not in the body.

    The code should look something like this

    #header {
background: #4a4a21 url('images/crab.png') no-repeat;
}

    I shortened up the code as well you’ll probably notice, it accomplishes the same thing that you had before but just uses one line 🙂

    Thread Starter mrcangrejero

    (@mrcangrejero)

    13 years, 3 months ago

    Thanks, JarretC. It does move the graphic but remains hidden behind the header. In case you have time, the header is CSS’ed this way:

    div#header
    {
    float: left;
    width: 1100px;
    height: 180px;
    margin: 10px auto 0 auto;
    text-align: left;
    background: white;
    /* code to be used for opacity in DIVs */
    opacity:.8; /* — for modern browsers — */
    filter:Alpha(opacity=80); /* — hack for IE browsers — */
    /* code to be used for opacity rounding DIVs corners */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

    Thanks again for any guidance!

    Jarret

    (@jarretc)

    13 years, 3 months ago

    You never changed your code at all.

    div#header
{
float: left;
width: 1100px;
height: 180px;
margin: 10px auto 0 auto;
text-align: left;
background: white url('images/crab.png') no-repeat;
/* code to be used for opacity in DIVs */
opacity:.8; /* -- for modern browsers -- */
filter:Alpha(opacity=80); /* -- hack for IE browsers -- */
/* code to be used for opacity rounding DIVs corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

    Try that for the CSS.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘images positioning’ is closed to new replies.