homepage Welcome to WebmasterWorld Guest from 54.167.11.16
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Positioning content over fixed background image
sssweb




msg:4384946
 4:44 pm on Nov 8, 2011 (gmt 0)

I have a background pic on a webpage that I've set to a "fixed center center" position, so that it remains centered on the user's screen regardless of browser window size.

I have a text block that I want to display at a set position relative to the pic (i.e. I want it to display over a certain part of the image -- the white space).

Is there a way to do that?

 

Paul_o_b




msg:4385043
 9:22 pm on Nov 8, 2011 (gmt 0)

Hi,

If you have a background image using background-attachment:fixed then the image is relative to the viewport and will not scroll with the document.

If you want to place a div over part of that image and for it to not also scroll with the document then use position:fixed (not supported in IE6) as all fixed elements are relevant to the viewport.

You'll need to know the dimensions of the box and do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body{background:url(img.gif) fixed 50% 50% no-repeat}
.box {
position:fixed;
width:98px;
height:98px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
background:red;
border:1px solid #000;
text-align:center;
}
</style>
</head>

<body>
<div class="box">
<p>Text Box</p>
</div>
</body>
</html>


However, that means you can't have any other scrollable content on the page because it will most likely scroll over the top of that fixed element unless you can make allowances or perhaps that's the effect you were after.

sssweb




msg:4385081
 11:07 pm on Nov 8, 2011 (gmt 0)

Thanks Paul -- that's perfect.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved