/    Sign up×
Community /Pin to ProfileBookmark

Background Stop!!!

Copy linkTweet thisAlerts:
Nov 14.2011

Hello,
I am trying to figure out how to stop a background image from moving when you scale a browser down. I want this image to stop when the content reaches the edge and stops. Kind of like this…. [url]http://www.dnadarwin.org/[/url] If you scale the browser down you will notice the content stops as well as the background image. The way I have it, the background image continues moving when the content stops. Help! Thanks.

to post a comment
HTML

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyNov 14.2011 — If I understand what you are asking, you want to prevent your content(and content background) from shrinking when the browser window becomes smaller.

If that is the case, this could be achieved by setting an absolute 'width' for your content area. Depending on how you want your template to react, you could also use the 'min-width' property to allow the content area to get smaller, but only to an extent(set by 'min-width').

[EDIT]

Also, since you mention your background seems to continue moving, this also may depend on how you have implemented your background image to the page/content. But to determine if this is the case and/or how to fix it, some example code or a link to your page/code would be needed.

[/EDIT]
Copy linkTweet thisAlerts:
@cootheadNov 14.2011 — Hi there andy.richin,

here is the basic example...
[color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
margin:0;
background-image:url('http://www.dnadarwin.org/img/paper.jpg');[color=red]
background-position:center top;[/color]
}
#container {
width:900px;
height:1200px;
margin:auto;
background-color:#fc9;
} <br/>
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div id="container"&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
[/color]
[i]coothead[/i]
×

Success!

Help @andy_richin 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.18,
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,
)...