Center Image Inside <DIV> Block and Position Image On Top Of Other Image

Posted on 2009-02-14
Last Modified: 2012-05-06
Trying my first foray into using Style Sheets (instead of tables) to lay out my entire site.  I'm creating blocks of nested divs.  I can't get my first item i need to layout to work correctly.  i'm attaching a picture and my code.  I need to align my logo in the center relative to the "header".  then the logo needs to float on top of the header image.

also, if you notice anything that i could be architecting wrong (in terms of the CSS) that will come back to bite me, please let me know.

I'm also going to attach the 2 images so you can have them at your disposal
Styles.css file

* {

	margin: 0 0 0 0;

	padding: 0 0 0 0;

	border: 0;


body {

	margin: 0 auto;

	width: 817px;

	min-width: 817px;

	background: #5b5248;




	display: block;

	position: relative;

	height: 658px;

	width: 817px;

	margin: 0 auto;



#container .header {

  position: relative;



#header .logo {

  position: relative;


  margin: 0 auto;

  display: block;



    <html xmlns="">

    <head runat="server">


        <link rel="stylesheet" media="screen" href="Styles.css" type="text/css" />



        <form id="form1" runat="server">

        <div id="container">

            <div id="header"><img src="Images/BarTop.gif" />

                <div id="logo"><img src="Images/LogoInfinity.gif" /></div>







Open in new window

Question by:davidcahan
    1 Comment
    LVL 42

    Accepted Solution

    You should make BarTop.gif be the background image for #header.

    You don't seem to have any "logo" or "header" classes but both are IDs.
    #header {
      background-image: url(Images/BarTop.gif);
      background-repeat: no-repeat;

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now