/    Sign up×
Community /Pin to ProfileBookmark

Resolution and Background Sizing issues

Copy linkTweet thisAlerts:
Feb 28.2005

Alright, so here’s my shpeal.

The website I am attempting to create is CSS based, and has two divs. A “left” and a “content”. My left div has a picture background which fits the website, and looks good. Here’s my problem. If the resolution is different than mine, then the background I am trying to set gets really screwed up, in the sense that it either gets too small, or really big.

At first I had it set by pixel count, and then realized the error of my ways, and tried to change it to percentage. Now, whenever I change resolutions, the picture gets really messed up vertically.

The picture itself is 147×900… does anyone have suggestions as to what measurements I could/should use to make it work?

Here’s some example code of what I’m talking about:

[code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<title> Marcon Inc.</title>
<LINK TYPE=”text/css” HREF=”styles/Marcon.css” REL=”stylesheet”>

<body>
<div id=”left” style=”background-image: url(Pictures/crackback.gif); height: 155%; width: 147px; border: 1px solid black;”>
<br>
<br>
<img src=”pictures/marconLogo.gif”>
<br><br>
</div>
</div>
<div id =”content”>
<br><br>
<br><br>
<br><br>
<br>
<h1><center>Welcome to MarCon, Inc.</center></h1>
<center>
<img src = “pictures/index.jpg”>
</div>
</div>
</body>
</html>
[/code]

to post a comment
HTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@SnitchcatMar 01.2005 — <i>
</i>&lt;div id="left" style="background-image: url(Pictures/crackback.gif); height: 155%; width: 147px; border: 1px solid black;"&gt;[/quote]

Have you tried using only 'height: 155%' or only 'width: 147px;' in the tag?

(I'm not on my home comp so can't be sure this'd help. (And I don't dare thoroughly investigate this at work.))

Take care,

Snitchcat.

a.k.a., Snitch.
Copy linkTweet thisAlerts:
@kirby101authorMar 01.2005 — Yeah, but it didn't work. any other ideas? should I just convert to a color background and save myself hours of grief?
Copy linkTweet thisAlerts:
@SnitchcatMar 02.2005 — What about setting the height value to 100%? I noticed it's at 155%.

I've tested my own graphics using height:100%; width:147px and height:155%; width:147px. While my images become 'magnified' or the opposite, they've stayed in proportion each time I've changed my resolutions.

On the other hand, if the pic is giving that much grief, I would indeed suggest switching to a solid colour background for the moment -- at least until a solution can be found. Once the solution is there, you can always switch back to the graphic.

I'm sorry I can't suggest anything more helpful.

Take care,

Snitch.
Copy linkTweet thisAlerts:
@kirby101authorMar 02.2005 — Ok, so I've changed my main page as follows:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;title&gt; Marcon Inc.&lt;/title&gt;
&lt;LINK TYPE="text/css" HREF="styles/Marcon.css" REL="stylesheet"&gt;
&lt;style type="text/css"&gt;
&lt;!--
body{
margin: 0px auto;
background-image: url(pictures/crackback.gif);
/* repeat-y will only repeat down the left side of the page */
background-repeat:repeat-y;
}
#left {
position: absolute;
width: 147px;
height: 100%;
}
#content{
margin: 0px 0px 0px 150px;
padding: 0 10px 10px;
}
--&gt;
&lt;/style&gt;
&lt;body&gt;
&lt;div id="left"&gt;
&lt;br&gt;
&lt;br&gt;
&lt;img src="pictures/marconLogo.gif"&gt;
&lt;br&gt;&lt;br&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id ="content"&gt;
&lt;br&gt;&lt;br&gt;
&lt;br&gt;&lt;br&gt;
&lt;br&gt;&lt;br&gt;
&lt;br&gt;
&lt;h1&gt;&lt;center&gt;Welcome to MarCon, Inc.&lt;/center&gt;&lt;/h1&gt;
&lt;center&gt;
&lt;img src = "pictures/index.jpg"&gt;
&lt;br&gt;&lt;br&gt;&lt;BR&gt;
&lt;h2&gt;This website is still under construction. We are sorry for the inconvenience.&lt;/h2&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


This looks better, though I'm not sure where I would change my over all height to 100%. It seems as though everywhere I do it, it changes the actual container itself, and not the picture, which could be my problem. What do you think?

Thanks.
Copy linkTweet thisAlerts:
@kirby101authorMar 02.2005 — Ok, I got it figured out. Thanks a lot, snitchcat. You got me on the right path, and I figured it out.

yay! it works! ^_^
Copy linkTweet thisAlerts:
@SnitchcatMar 03.2005 — Lol! Glad you got it figured out. Yay! (^_^)

Take care,

Snitchcat.

a.k.a., Snitch.
×

Success!

Help @kirby101 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.20,
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,
)...