Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Image not showing in <div><h1>

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • April 27, 2010 at 4:10 pm #28865
    annbemrose
    Participant

    Hello. I’m obviously not very competent with CSS–I’ve been struggling with this for hours! I want to put an image in the header of a website, but it doesn’t show. I put borders around it so that I could see if my code and style was being read. It seems that they are. The image is in the same directory as the HTML and CSS files.

    The HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="en-GB">
    <head>
    <title>Example 1</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="description" content="Example 1" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index, follow" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="styles2.css" media="screen" />

    </head>
    <body>

    <div id="header">
    <h1>Title</h1>
    </div>
    </body>
    </html>

    The CSS:

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

    body {
    margin:0;
    padding:0;
    border:0;
    width:100%;
    background:#fff;
    min-width:600px;
    font-size:90%;
    }

    a:link {
    color:#369;
    }
    a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
    }

    h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
    }

    h1 {
    width: 600px; height: 289px;
    border-right: 1px solid #89a804;
    border-left: 1px solid #89a804;
    border-top: 1px solid #89a804;
    border-bottom: 1px solid #89a804;
    background-color: #FFFFFF;
    background-image: url(logo1.png) no-repeat;
    }

    </style>

    This shouldn’t be difficult! But it’s not working for me. Should I just give up?

    Ann

    April 27, 2010 at 4:45 pm #74823
    virtual
    Participant

    Change the following:
    h1 {
    width: 600px; height: 289px;
    border-right: 1px solid #89a804;
    border-left: 1px solid #89a804;
    border-top: 1px solid #89a804;
    border-bottom: 1px solid #89a804;
    background-color: #FFFFFF;
    background-image: url(logo1.png) no-repeat;
    }

    to this:
    width: 600px;
    height: 289px;
    border-right: 1px solid #89a804;
    border-left: 1px solid #89a804;
    border-top: 1px solid #89a804;
    border-bottom: 1px solid #89a804;
    background: #FFFFFF url(logo1.png) no-repeat;

    You will need to specify the position of the background image after the no-repeat as for the moment it shows under the "Title"

    April 27, 2010 at 5:01 pm #74828
    annbemrose
    Participant

    Wonderful! Thank you! I never would have known that it was a problem to put the background things as separate.

    Thank you again!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.