Hi... i need some help.
I have a .jsp file and a div tag containing h1 tag.

<div id="header">
    <h1 class="header1"><fmt:message key="application.title"/></h1>
</div>
<div id="login"><jsp:include page="/WEB-INF/common/login.jsp" /></div>

here my css file:

#header{border-bottom:1px solid #999;margin-bottom:10px;height:10px;width:100%;
        background: transparent url('../images/test.png') left top no-repeat;
        background: transparent url('../images/test1.jpg')right top no-repeat;
    }

my problem is the second image test1 is not displaying. how can i solve this issue?

You'll need to use a second div, to position one of the images.

i did it still dont work.

That's vague. What did you try, and what didn't work?

i add a div tag:

<div id="header">
    <h1 class="header1"><fmt:message key="application.title"/></h1>
    <div id="subHead"></div>
</div>
<div id="login"><jsp:include page="/WEB-INF/common/login.jsp" /></div>


 and in my css file:

#subHead{background: transparent url('../images/test1.jpg')left top no-repeat;}

I dont know why it's not working! :(

subHead needs to have the same size as header.

ok now it's appearing. but amhaving problem to align it above the border! any idea how to do this?

Am not sure which border you mean. Anyway, without being able to see the whole thing it's just guess work.

ok i have a border here

#header{border-bottom:1px solid #999;margin-bottom:10px;height:10px;width:100%;
        background: transparent url('../images/test.png') left top no-repeat;
        background: transparent url('../images/test1.jpg')right top no-repeat;
    }


and here my subHead:

#subHead{margin-bottom:10px; padding-top:1px; height:55px;width:100%;min-width:960px;
background: transparent url('../images/test1.jpg')right top no-repeat;}


it is being displayed below the border. I want it to be above.

Height of the header is 10, while subHead is 55.

CSS3 allows this sort of thing and it looks like this:

body {
             background-image: url(images/bgtop.png), url(images/bg.png);
            background-repeat: repeat-x, repeat;
         }

The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>
body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

@priteas I change both to 55px and still not working.

#header{border-bottom:1px solid #999;margin-bottom:10px;height:55px;width:100%;
        background: transparent url('../images/test.png') left top no-repeat;
    }

and here my subHead:

#subHead{margin-bottom:10px; padding-top:1px; height:55px;width:100%;min-width:960px;
background: transparent url('../images/test1.jpg')right top no-repeat;}

@noranterry i dont have body. i have only div tag.

I am having problem to align the two image on same line. one on the left and one on the right. Please Help...

I know where the problem is but cant find a solution.

<div id="header">
    <h1 class="header1"><fmt:message key="application.title"/></h1>
    <div id="subHead"></div>
</div>
<div id="login"><jsp:include page="/WEB-INF/common/login.jsp" /></div>

the div id=subHead is after the h1 tag. so thats why the image is displaying after the h1 tag. if i put the div tag above,the image is displayed first , then the h1 tag below. I want both to be align on the same line.
one image on the left, then my text, and one image on the right. all 3 on the same line above the border. how to do this.here my css file:

#header{border-bottom:1px solid #999;margin-bottom:10px;height:55px;width:100%;
        background: transparent url('../images/test.png') left top no-repeat;
    }

and here my subHead:

#subHead{margin-bottom:10px; padding-top:1px; height:55px;width:100%;min-width:960px;
background: transparent url('../images/test1.jpg')right top no-repeat;}

ok i try a solution using float, but it's not working.

<div id="header" style="width:50%; height:50%;">
    <h1 class="headerTitle"><fmt:message key="application.title"/></h1>    
</div>
<div id="subHead" style="width:50%; height:50%;"></div>

<div id="login" style="width:100%; height:50%; "><jsp:include page="/WEB-INF/sitemesh-common/login.jsp" /></div> 

and here my css:

#header{border-bottom:1px solid #999;margin-bottom:10px;float:top left;min-width:960px;
    background: transparent url('../images/test.png') no-repeat;}

#subHead{margin-bottom:10px;float:top right;min-width:960px;
background: transparent url('../images/test1.jpg')no-repeat;}

#login{float:bottom;*margin-bottom:-26px;}

the image test1 is not displaying. why this?

ok. now place both divs (subhead and header) in a single div. such as to have:

<div>
    <div id="header">
    </div>
    <div id="subhead">
    </div>
</div>

This here should work.

@k99rs both image is not appearing now.(When i add the new div tag).

It should have work. Here is a working example.

<html>
<head>
    <style>

        .header{
            background-image:url('DSC04558.jpg');
            float:left;
            width:50%;
            height:50px
        }
        .subheader{
            background-image:url('DSC04559.jpg');
            float:right;
            width:50%;
            height:50px;

        }
    </style>
</head>
<body>
    <div>
     <div class="header">
      </div>
      <div class="subheader">
      </div>
    </div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.