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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Background picture will not display

    Hi everyone-
    I'm a *very* new programmer building my first website. I'm having issues in <header> background images not displaying, and hoped you could all lend a hand. I hope to one day have more to offer in this forum. So, without further ado, here is my code:

    HTML

    <header>
    <a href="#" id="all-shapes"></a>
    <a href="#" id="logo"></a>
    <a href="#" id="blog"></a>
    </header>


    CSS

    @charset "UTF-8";

    }

    #all-shapes {
    float: left;
    width: 250px;
    height: 250px;
    background: url("images/all-shapes.png");
    }

    #logo {
    float: center;
    width: 500px;
    height: 300px;
    background: url("images/whitelogo.png");
    }

    #blog {
    float: left;
    width: 250px;
    height: 250px;
    background: url("images/nyc-paris.png");
    }

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,369
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by taequilty View Post
    CSS

    @charset "UTF-8";

    }

    #all-shapes {
    float: left;
    width: 250px;
    height: 250px;
    background: url("images/all-shapes.png");
    }

    #logo {
    float: center;
    width: 500px;
    height: 300px;
    background: url("images/whitelogo.png");
    }

    #blog {
    float: left;
    width: 250px;
    height: 250px;
    background: url("images/nyc-paris.png");
    }
    Main Issue: Floats aren't the best solution for this layout problem. Relatively absolute positioning works better.

    Other Issues: (1) There's no such thing as float: center. (2) You have an orphaned curly bracket at the beginning of your style sheet. (3) I'd consider using img elements with alt attributes as is typically used for links instead of CSS background images; otherwise, if there are no images, the user (which could be a search engine bot or a user with low bandwidth) will have no description of what the link is pointing at.

    Code:
    <!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			header { position: relative; min-width: 1000px; min-height: 300px; }
    			header a { display: block; position: absolute; background: no-repeat;}
    			#all-shapes, #blog { width: 250px; height: 250px; }
    			#all-shapes { top: 0; left: 0; background-image: url("images/all-shapes.png"); }
    			#logo { top: 0; left: 0; right: 0; width: 500px; height: 300px; margin: 0 auto; background-image: url("images/whitelogo.png"); }
    			#blog { top: 0; right: 0; background-image: url("images/nyc-paris.png"); }
    		</style>
    	</head>
    	<body>
    		<header>
    			<a id="all-shapes"></a>
    			<a id="logo"></a>
    			<a id="blog"></a>
    		</header>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    taequilty (07-31-2013)


  •  

    Tags for this Thread

    Posting Permissions

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