Adding two background image in a header

Question

techyworld 0 Junior Poster in Training

10 Years Ago

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?

css web-design

Edited 10 Years Ago by pritaeas because: Moved.

4 Contributors
17 Replies
376 Views
1 Week Discussion Span
Latest Post 10 Years Ago Latest Post by k99rs

All 17 Replies

pritaeas 2,194 ¯\_(ツ)_/¯

10 Years Ago

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

pritaeas 2,194 ¯\_(ツ)_/¯

10 Years Ago

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

pritaeas 2,194 ¯\_(ツ)_/¯

10 Years Ago

subHead needs to have the same size as header.

pritaeas 2,194 ¯\_(ツ)_/¯

10 Years Ago

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

pritaeas 2,194 ¯\_(ツ)_/¯

10 Years Ago

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

Reply to this topic

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.

techyworld 0 Junior Poster in Training · Answer 1 · 2013-08-07T12:18:42+00:00

techyworld 0 Junior Poster in Training

10 Years Ago

i did it still dont work.

techyworld 0 Junior Poster in Training · Answer 2 · 2013-08-07T12:26:39+00:00

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! :(

techyworld 0 Junior Poster in Training · Answer 3 · 2013-08-07T12:41:17+00:00

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

techyworld 0 Junior Poster in Training · Answer 4 · 2013-08-07T12:47:00+00:00

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.

Noranterry 0 Newbie Poster · Answer 5 · 2013-08-07T20:15:44+00:00

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;
}

techyworld 0 Junior Poster in Training · Answer 6 · 2013-08-08T08:34:14+00:00

@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.

techyworld 0 Junior Poster in Training · Answer 7 · 2013-08-08T08:44:18+00:00

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

techyworld 0 Junior Poster in Training · Answer 8 · 2013-08-08T09:27:24+00:00

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;}

techyworld 0 Junior Poster in Training · Answer 9 · 2013-08-08T10:53:17+00:00

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?

k99rs 9 Newbie Poster · Answer 10 · 2013-08-13T22:50:32+00:00

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.

techyworld 0 Junior Poster in Training · Answer 11 · 2013-08-15T05:32:55+00:00

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

k99rs 9 Newbie Poster · Answer 12 · 2013-08-19T02:52:18+00:00

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>

Adding two background image in a header

Recommended Answers Collapse Answers

All 17 Replies

Recommended Answers