/    Sign up×
Community /Pin to ProfileBookmark

Fixed background woes.

Copy linkTweet thisAlerts:
Jul 04.2006

Good evening. I designed a site about a year and six months ago. It was done with HTML, no CSS, and looks very outdated. I’m working on one certain page that is giving me problems. I have a central idea that I want to make happen.

First off, here is the live example (sorry about the ad, ignore it please):
[url]http://www.morethanphysical.hostrocket.com/temp/[/url]

As you can see, Olivia and Gene are a fixed background image. Here is my CSS:

[CODE]body {
color: #FFFFFF;
background-color: #000000;
background-image: url(images/bg.jpg);
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
height: 800px;
}
[/CODE]

I included a height property so you can scroll away the ad if you wish. I want this page to be viewed well on laptops and at least 800×600. I positioned the background on the bottom of the window, to give it the effect that they are standing on the status bar of the browser. I do not want the image of olivia and gene to scroll with the content of the page (when added). This is going to be a 3 column layout with olivia and gene in the middle and one content column to each side. If we make the window small, it cuts off their heads. Is there a way I can keep them standing on the status bar for monitors that are large enough to view them; however, on monitors too small to view them, have the browsers clip the pic at their feet instead of at their heads?

Thanks for your help.

Jeremy

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Wiz_CreationsJul 07.2006 — I've never heard of any css (or any language, for that matter) that allows you to display only a certain part of an image. You might be able to do something like this:

Make separate image files for each window size.

Put some javascript in the page to detect the screen resolution.

Use if/else statements and the document.write(); javascript to have a page load different css files for different screen sizes. (You will have 2 css files: one for the body {} css and another for everything else.)

(note, i don't know javascript well enough to tell you how to do this. ask in the javascript forum)

example:

<head>

<meta and whatnot>

<link rel="stylesheet" type="text/css" href="maindesign.css" />

[javascript here to detect screen size]

if resolution = 800 x 600

[INDENT]document.write(<link rel="stylesheet" type="text/css" href="800-600.css" />[/INDENT]

else if resolution = 1040 x 800

[INDENT]document.write(<link rel="stylesheet" type="text/css" href="1040-800.css" />[/INDENT]

(continue for all screensizes...)

</head>
Copy linkTweet thisAlerts:
@soulmachineauthorJul 07.2006 — :eek: Wow, I didn't think of that. Thanks for the reply, that's very inventive. ?

Now, however, I've actually changed the idea of this page. I actually made olivia and gene scrollable. Now if the user scrolls to the end of the content, which is at the bottom of the page, then there they are standing on the status bar of the browser. I even gave them little steps to stand on. It worked great.

However, I can see where I would some day want to make a page like I was originally planning (with a fixed backgroud). So I am glad you gave me this new frame of thought, where I can use javascript to change CSS to suit screen size. I can see where that would be very helpful someday.

Thanks again ?

Jeremy
Copy linkTweet thisAlerts:
@WebJoelJul 07.2006 — Not quite what you're asking for (not a background image), but it has the virtue of staying in the same relative position AND re-sizes 'on-the-fly' for any browser resolution:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
#table {position:relative; width:75%; height:350px; margin:50px auto; z-index:+1; border:1px solid black;}
#little {position:absolute; left:38%; bottom:1px; width:20%; z-index:+3;}
</style>
<script language="javascript" type="text/javascript">
<!--
Nav4 = (document.layers) ? 1:0;
IE4 = (document.all) ? 1:0;
if(!IE4) {window.onerror=null}
function change() {
if (document.body.clientWidth < 700) {
table.style.width="90%"
}
else {
table.style.width="80%"
}
}
window.onresize=change
window.onload=change
//-->
</script>

</head>

<body>

<div id="table">
<img src="wooden_cat.gif" id="little" alt="cat image" />
</div>

</body>
</html>[/code]

Use attached image for demonstration purposes (designed to fit site).

-Joel

[upl-file uuid=43649779-dc18-493f-970e-aed61df67409 size=14kB]wooden_cat.gif[/upl-file]
×

Success!

Help @soulmachine spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...