I have tried using CSS to set the position of the background and the

Question

0

Asked: May 28, 20262026-05-28T04:09:55+00:00 2026-05-28T04:09:55+00:00

I have tried using CSS to set the position of the background and the

0

I have tried using CSS to set the position of the background and the objects to all possible types (fixed, relative, absolute). I have also adjusted the width, min-width of the background image.

The Test Page

CSS:

Background:

/* BG Image Style */
.bg {
 position: relative;
 width: 100%;
 height: 100%
 }

Player

/* Player Style */
#player {
 position: absolute;
 width: 680px;
 top: 60px;
 left: 380px;
 border: outset 5px white;
 }

Menu

/* Nav Menu */
ul#menu {
 position: absolute;
 top: 175px; 
 left: 68px;
 padding: 0; 
 list-style: none;
 clear: both;     
 }

HTML:

<html>
<head>
<title>BKK Testing Zone</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img class="bg" src="http://thebkk.net/Images/BVF-Template-Complete.png"/>

<div id="player">
<script type='text/javascript' src='http://thebkk.net/Scripts/jwplayer/jwplayer.js'>      
</script> 

<div id='mediaspace'></div>

<script type='text/javascript'>
 jwplayer('mediaspace').setup({
  'flashplayer': 'http://thebkk.net/Scripts/jwplayer/player.swf',
  'playlistfile': 'http://www.thebkk.net/test/playlist.xml',
  'backcolor': '000000',
  'frontcolor': '00FFFF',
  'lightcolor': '33FF33',
  'playlist': 'right',
  'controlbar': 'bottom',
  'width': '680',
  'height': '360',
  });
</script>
</div>

<ul id="menu">
<li class="home"><a href="http://thebkk.net"></a></li>
<li class="rules"><a href=""></a></li>
<li class="forums"><a href="http://forum.thebkk.net"></a></li>
<li class="links"><a href="" alt="Links"></a></li>
</ul>

</body>
</html>

Thanks! I searched around, and there were parts of what I wanted to do, but can’t seem to find exactly what it is I want.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-28T04:09:55+00:00

You might want to read up on “Responsive Web”. There’s a lot of ideas in there in terms of making fluid grids that might help in what you’re doing.

Regardless, I don’t know if you’re going to get what you’re looking to do to work perfectly with CSS alone. You’ll probably have to work with some JavaScript as well.

I would start over and try doing something like this for basic HTML:

<body>
    <div class="container">

        <div class="media"></div>

        <div class="menu"></div>

        <img src="background.png" />
    </div>
</body>

I would put things in a container div just because I don’t like working directly off the body element for CSS. It’s a little more self contained modules.

As for CSS, you will make your background image like you have.

Your menu will then need to images put into the list items (LI) with the IMG tag. Those IMG will need a width:100% style.

Right now, you’re using the menu images as backgrounds, which won’t be fluid very well, so just like you did with the main background image, you need to do with your menu.

You then need to set the menu container width to be a % of the larger container (ie. the background image).

To get this % you need to divide the width of the area you want the menu to fit in by the total container width.

Your background image looks like it’s 1280px. The total width of the “window” is like 214px.

This would mean the width of the menu should be:

214px / 1280px = 0.1671875 * 100% = 16.71875%

You then need to place the menu container properly using the same CSS as you where using but use % instead of pixels because this will allow the positioning to move with the browser size.

The upper left corner of that background “window” looks like it starts 20px in from the left and 263px down from the top.

20px / 1280px = 0.015625 * 100% = 1.5625%

left: 1.5625%

263px / 960px = 0.27395833333333333 * 100% = 27.39583333333%

top: 27.39583333333%;

Now, the menu container should have a proportional width compared to the background image (which is what you’re trying to line the menu up with), meaning it should sort of expand or contract with the background image.

And remember the menu HTML needs to be like this:

<ul>
    <li><img src="..." alt="" /></li>
    [...]
</ul>

with CSS:

#menu li img{ 
    width:100%; 
}

I’m not really sure this will work but it might get you going in the right direction. Regardless, I don’t see the result of this being very good.

This might be a case where you’re better off making a full Flash website (as much as I don’t like using Flash).

I hope that helps!

Cheers!

— UPDATE —

I put together a little proof-of-concept. I only tested it in Chrome and the latest FF. As I expected, you can get it to work but you’re going to run into support issues.

Anyway, here’s a background image I made with basically 2 target areas (boxes). It’s similar to original one.

background image (1000×750. I started with 1024×768 or iPad dimensions and made it 1000px wide for easy percentages)

http://tinypic.com/r/11r9edw/5

menu image 1

http://tinypic.com/r/2s7ucmg/5

menu image 4 (i’ll skip uploading all the menu images for sake of brevity)

http://tinypic.com/r/2nlv42x/5

The CSS (percentages are sloppy, but it’s only a proof-of-concept)

body{
    margin:0;
    padding:0;  
}
.container{
    position: relative;
    width: 100%;
    height: 100%;
    background-color:#F0F; 
}
.bg-img{
    display:block;
    position: relative;
    width: 100%;
    height: 100%;
    z-index:1; 
}
.menu{
    position:absolute; 
    width:15%; 
    height:33%;
    top:33%; 
    left:10%; 
    border:1px dashed red; 
    z-index:10; 
}
.menu ul{
    height:100%;
    margin:0;
    padding:0;
}
.menu li img{ 
    width:100%; 
    height:100%;
    margin:0;
    padding:0;
}
.menu li{ 
    position:relative; 
    height:24.5%;
}

.media{
    position:absolute; 
    width:43%; 
    height:15%; 
    top:16%; 
    left:31%; 
    background:#9CC;
    z-index:10; 
}

The HTML

<div class="container">
    <img class="bg-img" src="bg.png" alt="" />

    <div class="menu">
        <ul>
        <li><a href="#"><img src="menu1.png" alt="Menu 1" /></a></li>
        <li><a href="#"><img src="menu1.png" alt="Menu 2" /></a></li>
        <li><a href="#"><img src="menu4.png" alt="Menu 3" /></a></li>
        <li><a href="#"><img src="menu4.png" alt="Menu 4" /></a></li>
        </ul>
    </div>

    <div class="media"></div>

</div>

I more or less just used position:absolute to “float” everything as a ratio/percentage of the background image, which is stretched to 100% width/height of the browser.

Defined heights/widths are necessary (and setting margins/padding to zero to reset browser defaults).

Chrome seemed to work well. FF seemed to have an issue with height:100%. It’s possible it could be cleaned up some more, but that should be a start to get what you’re looking to do with CSS.

But like I said, this kind of thing isn’t well handled in CSS, even with CSS3 this kind of design will cause a lot of headaches for backwards compatibility.

HTML 5 is here and that’s not going to be a magic bullet either. This design concept is very vector based and Flash is perfect for that kind of thing.

Hope this helps! =)

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have tried using CSS to set the position of the background and the

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply