Skip navigation
Maximillion1255
Currently Being Moderated

Hey all, I can't seem to keep my background image from disapearing..

Dec 11, 2012 12:28 AM

Tags: #background #image #dreamweaver #css #style #disapearing

All I wanted to do was repeat my background image and have it hit any browser size.
Here's the code I ended up with:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

<!--

html {

    background-image: url(images/backgroundimage.png);

    background-repeat: repeat-y;

    background-;    margin: 0px;

    padding: 0px;

    width: 100%;

    background-position: center center;

    -moz-background-size: cover;

    background-size: cover;

    text-align: center;

}

-->

</style>

</head>

 

<body>

<img src="images/GowerAikidoLogo.jpg" width="459" height="181" alt="Logo" />

</body>

</html>

 

The last image in the "<body>" is a image I put in to test everything was working and when I did the background image disapears, also the same if I insert a table or even write words..

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 1:12 AM   in reply to Maximillion1255

    Change this

    html {

        background-image: url(images/backgroundimage.png);

        background-repeat: repeat-y;

        background-;    margin: 0px;

        padding: 0px;

        width: 100%;

        background-position: center center;

        -moz-background-size: cover;

        background-size: cover;

        text-align: center;

    }

     

    to this:

     

    body {

        background-image: url(images/backgroundimage.png);

        background-repeat: repeat-y;

        background-;    margin: 0px;

        padding: 0px;

        width: 100%;

        background-position: center center;

        -moz-background-size: cover;

        background-size: cover;

        text-align: center;

    }

     

    And remove the line of code I've struck off above. It is an invalid line of code. There is nothing called background-margin, even if it were, your formation is incorrect either way!

     

    You want the 'body' of your document to have the background and other settings you've defined. html just defines the doctype, body defines the actual content body of your document.

     

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 1:20 AM   in reply to Maximillion1255

    Can you put this on your server and give us a link?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 1:29 AM   in reply to Maximillion1255

    I've used the same code just changing the background-image and img src links and I've uploaded it to my server. It works just fine.

     

    Take a look here: http://www.sudarshan.me/adobeforum/dw/testbg

     

    Can you take a screenshot and post it here?

     

    Also, do you have <html> as the first line? I don't see it in the code you posted earlier.

     

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 1:31 AM   in reply to Sudarshan Thiagarajan

    Also, you can remove:

     

    width: 100%;

     

    from your CSS. This will cause horizontal scrolling. It is not required.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 1:51 AM   in reply to Maximillion1255

    Wonder why that is.

     

    Anyway, I guess the reason you're using that background image is for the drop shadow effect? Well, now you don't have to use an image to achieve that! You can use plain CSS to do it.

     

    Here's the CSS:

     

    <style type="text/css" media="screen, projection">

    #container{
    width: 960px;
    margin: 0 auto;
    min-height: 800px;
    background-color: rgba(255, 255, 255, 0.9);
    color: rgba(255, 255, 255, 0.9);
    -webkit-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.72);
    -moz-box-shadow:    0px 5px 10px rgba(50, 50, 50, 0.72);
    box-shadow:         0px 5px 10px rgba(50, 50, 50, 0.72);
    color: #009ece;
    padding: 10px;
    }

    </style>

    Then, start your content like this:

     

    <body>

    <div id="container">

    <img src="images/GowerAikidoLogo.jpg" width="459" height="181" alt="Logo" />

    </div>

    </body>

     

    It will work on all modern browsers. Plus, saves the load time your background may take!

     

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 6:13 AM   in reply to Maximillion1255

    You're welcome. Let us know how it goes.

     

    ST - is my name!

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 7:08 PM   in reply to Maximillion1255

    What do you mean the top and bottom part? You mean you want the height of the #container to be 100%?

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points