Add text beneath the website backround image?

**wilson_li** · 19 Aug 2011, 04:03 PM

Hello All,

I have a question regarding to my website's home page:

Right now my homepage has been embedded with an image and I want to insert the HTML text beneath the image. The text should not overlap to the background image and should have the same width as the webpage. Is there any way I can do that?

I know maybe I should post this thread to other forum but here I can be helped from more warm-heart volunteers :)

Here is my home page: http://www.oleklejbzon.com/campbellsloft2/

HTML Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>

    <title>Campbellsloft - Space Age Rugs, ART</title>
    <style type="text/css">

    /*.bottom
    {
        float: right;
        width: 250px;
        border-right-width: 20px;
        border-color: black;
        background-color: black;   
        color: white; 
    }*/

    p {font-family: calibri;}
    /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
    #html, body {height:100%; margin:0; padding:0;}
    /* Set the position and dimensions of the background image. */
    #page-background {color: black; position:fixed; top:0; left:0; width:100%; height:100%;}
    /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
    #content {position:relative; z-index:1; padding:10px;}

    #background{color: black;}

    </style>


    <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
    <!--[if IE 6]>
    <style type="text/css">
    html {overflow-y:hidden;}
    body {overflow-y:auto;}
    #page-background {position:absolute; z-index:-1;}
    #content {position:static;padding:10px;}
    </style>
    <![endif]-->
    </head>
    <body>
       <div id="page-background"><img src="/campbellsloft2/i/image007_003.jpg" width="100%" height="100% ></div>
       <div id="content" align="bottom" bgcolor="black">
       <h2></h2>
       <p>hello world</p>
       <p></p>
       </div>      
       
    </body>
    </html>

**stevesh** · 19 Aug 2011, 04:19 PM

All I see is a white page with this text:

Please wait a moment and you will be redirected to the forums

I refreshed the page and can see the image, but that's not a Zencart site.

**wilson_li** · 19 Aug 2011, 04:53 PM

Originally Posted by stevesh

All I see is a white page with this text:

Please wait a moment and you will be redirected to the forums

I refreshed the page and can see the image, but that's not a Zencart site.

Hello, Steve! Yes, this is actually the homepage of Zen-Cart site, I want to add text beneath the background image (No overlapping to the background image) for SEO stuff.

Right now, you can fresh the page, you'll see the text overlapped the background image. Is there any way to avoid that?

Thanks

**wilson_li** · 19 Aug 2011, 05:11 PM

Well, I think I can adjust the height to 90% then the text will fit the background without overlapping.

HTML Code:

<div id="page-background"><img src="/campbellsloft2/i/image007_003.jpg" width="100%" height="90% ></div>

**wilson_li** · 19 Aug 2011, 05:23 PM

No,I still have the white border if I change my screen resolution into 1600 x 1200 or higher. Any idea how to do that?

Thread: Add text beneath the website backround image?

Thread Tools

Search Thread

Display

Add text beneath the website backround image?

Re: Add text beneath the website backround image?

Re: Add text beneath the website backround image?

Re: Add text beneath the website backround image?

Re: Add text beneath the website backround image?

Similar Threads

Want to add an image to the top of my website.

Adding explanatory text beneath option names on product page

larger image link beneath product image

Howto add a image in backround?

Swap over the 'add to cart' text/box and the 'add to cart' image

Bookmarks

Bookmarks

Posting Permissions