Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering a background behind text

    Hello all. I'm attempting to center a background behind text. I got it so it works on my monitor, but when I resize my screen, the image goes off to the right. I need the image to stay centered on the screen, behind H1 and H2.

    Here is my code.

    <h1>Electronic Solutions</h1>
    <div style= "position:fixed;
    left:425px;
    top:10px;
    z-index:-1;">
    <IMG SRC="images/banner.jpg" ALT="Banner" height="200" width="850">
    </div>
    <h2>Serving all your telecommunication needs</h2>

    all I want is the banner to stay behind the headings. I haven't tried floating it but was concerned because I am placing it behind text whether that would work correctly.

    My website is www.myelectronicsolutions.com which I know isn't compliant with W3 standards, nor are the colors and such correct at the moment.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there jbrintnell,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.myelectronicsolutions.com">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Electronic Solutions</title>
    
    <style type="text/css">
    body {
        margin:10px;
        background-color:#b7d0e4;
        font-family:'times new roman',garamond,serif;
        font-size:18px;
        color:#000066;
     }
    #container {
        width:850px;
        margin:auto;
     }
    #header {
        height:186px;
        padding-top:14px;
        background-image:url('images/banner.jpg');
     }
    h1 {
        margin:0 0 24px;
        font-family:arial,'century gothic',tahoma,sans-serif;
        color:#df013a;
        text-align:center;
     }
    h2 {
        margin:0;
        font-family:arial,'century gothic',tahoma,sans-serif;
        color:#c0c;
        text-align: center;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header">
     <h1>Electronic Solutions</h1>
     <h2>Serving all your telecommunication needs</h2>
    </div>
    
    </div><!-- end #container -->
    
    </body>
    </html>
    
    coothead

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So if I understand what you did there, you simply placed it all in a container that you defined as the same width as my banner?

    I used your code, although I moved your CSS comments to the style sheet as once I get this it will affect the other pages as well.

    It now works exactly as intended. Thank you.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    No problem, you're very welcome.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •