...

View Full Version : background image: how to align with r/h side of div



bazz
07-11-2008, 05:32 PM
Hi, I've got a header div with a background image. The image is 1600px wide and has a height of 400px; I want the background image to flow from the r/h side of the div. here's my css so far. I need you guys to send me to a tute or give advice on making it align right.
#logo_div { width:100%; height:400px; padding:0; margin:0; border:0; background:url('/images/header_opt.gif'); } Is this even on the right track?
background:url('/images/header_opt.gif') position:absolute,right:10px; bazz

BWiz
07-11-2008, 05:37 PM
You may have to flip your background image using your image editing software before you use background-position: right;. I'm not sure what you mean by "flow from the right", but I'm guessing you want it to start from the right. In that case, you may be using background-position wrong. All this does is align the background image to the right, and you back only really see this in gradients and if the background-image is too small for the wrapper, and repeat is set off.

Also, your screen resolution may be too low to actually see the image positioned to the right, as your background image is currently 1600px wide.

bazz
07-11-2008, 05:40 PM
Hi BWiz,

The div is 100% of the browser width; not 1600px wide. I am trying to make sure that the important part of the logo is always visible (on the right hand side) and that as browsers, more commonly, gain higher resolutions, the logo will show more of itself.

I suppose: think of the logo as a snake. Its head on the right and its body flows off the left of the window. as the browser gets wider, the head will always be on the right and more of the body will be shown.

bazz

BWiz
07-11-2008, 05:53 PM
This seemed to work for me. Try it out.


<html>
<head>
<title>bgRight.html</title>
<style type="text/css">
body, bar, h1 {
margin: 0;
padding: 0;
}

#bar {
width: 100&#37;;
height: 400px;
background-image: url('elements/bgTest.png');
background-position: right;
background-repeat: no-repeat;
background-color: #969696;
}
#bar h1 {
text-indent: -9999px;
}
</style>
</head>
<body>
<div id="bar">
<h1>BarImage</h1>
</div>
</body>
</html>

bazz
07-11-2008, 06:55 PM
BWiz that's great. Now I shall try to work in %'ages because I think 400px is too big for a header at 1024x768.

Thank you for the help. :thumbsup:

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum