Home/ Questions/Q 6255385
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T14:21:19+00:00

I want a layout like this. Please take a look the image As you

  • 0

I want a layout like this. Please take a look the image

enter image description here

As you can see, i have top bar and footer bar. Since footer bar is solid bar, i can just use div and fill the solid color.

But for the top bar, I have to use image as an background inside div. And here is the image of top bar.

enter image description here

What I want to do is, the black square box (logo) should be fixed at the right corner and the bar should repeat according to the width of the screen.

Please kindly provide me the css for the top bar. Thank you.

Edit: Sorry about my careless. Here is my code.

<html>
<head>
</head>
<body style="margin:0px">
<div style="width:100%; height:100%">
<div style="position:absolute; top:10px; background:url(bglogo.png); width:100%; height:100px"></div>
<div style="position:absolute; bottom:0px; width:100%; height:20px; background:#000"></div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Don’t use an image for the entire top bar. Handle it in exactly the same way as the bottom bar, but with a few additions.

    You should do it as I’m suggesting because the logo should be a clickable link.

    The HTML should be similar to this:

    <div id="topBar">
    <a id="logo" href="/"><img src="logo.png" alt="whatever" /></a>
</div>

    With this CSS:

    #topBar {
    position: relative;
}
#logo {
    position: absolute;
    top: -10px;
    right: 0
}
    • 0