/    Sign up×
Community /Pin to ProfileBookmark

repeat y needs to be auto

Copy linkTweet thisAlerts:
Jul 22.2006

I need to fix the white background on [URL=http://www.xn3ct.net/SampleSite04/index.html]http://www.xn3ct.net/SampleSite04/index.html[/URL] to be visible “y” vertically, depending on the viewer’s monitor resolution. The background image is 948px wide and should repeat “y” not only till the content finishes, but also till there is no more to scroll. If you see it at 1680X1050 you’ll see what’s the problem. At the same time the whole site needs to be centered as it is now too. So, here’s the code I have and I’m getting a bit too mixed up. Thanks.

HTML:

[code=php]<div id=”Layer1″ class=”cont”>
<div id=”vert” style=”position:absolute; left:0px; top:0px; width:948px; height:850px; z-index:1;”></div>[/code]

CSS:

[code=php]#vert {
background-image:url(../img/bgrdiv.gif);
background-repeat:repeat-y;
}

div.cont {
position: relative;
margin: 0 auto;
width: 1024px;
height: 800px;
text-align: left;
top: -18px;
left: 14px;
visibility: visible;
z-index: 1;
}[/code]

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienJul 23.2006 — [code=php]#vert {
background: transparent url(../img/bgrdiv.gif) repeat scroll 50% 0;
}
[/code]
The background image is centered on the screen horizontally and is aligned initially to the top. It also repeats on both the X and Y axis. With the BG image centered initially, and your layout centered, things should line up just fine no matter what the user's resolution.
Copy linkTweet thisAlerts:
@Wiz_CreationsJul 23.2006 — It looks like you only want it to repeat the y-axis. Sorry if you already know this, but if you need the css toicontien gave you to repeat only the y-axis, change [color=blue]repeat[/color] to [color=blue]repeat-y[/color].
Copy linkTweet thisAlerts:
@toicontienJul 23.2006 — He had repeat-y to begin with, but he needs the BG image to fill the screen on larger screen resolutions, unless I completely misunderstood what the problem was ?
Copy linkTweet thisAlerts:
@Wiz_CreationsJul 23.2006 — I don't know. Maybe it was me who misunderstood. I thought he wanted it to only repeat down the screen until the image ended, but not across...
Copy linkTweet thisAlerts:
@jamesx521authorJul 24.2006 — I'll try the changes tomorrow. I wanted the image to repeat only to the y axis (vertically) and also to be centered in the monitor horizontally.

If they have a regular monitor, it would be like this:

[B]000img000

000img000

000img000[/B]

And if they have a wide screen monitor, it would be like this:

[B]0000img0000

0000img0000

0000img0000[/B]

Regardless of the two monitors (and/or different resolutions) the image stays centered horizontally and it ends at the bottom of the monitor vertically
Copy linkTweet thisAlerts:
@jamesx521authorJul 24.2006 — From the last sentence I meant, REPEATS to the bottom of the monitor vertically.
Copy linkTweet thisAlerts:
@Pixel-ArtistJul 24.2006 — add this to css
<i>
</i>html,body {
height: 100%;
}

set the div with the repeating background to 100% height
Copy linkTweet thisAlerts:
@jamesx521authorJul 24.2006 — Now what happens to the HTML, I should get rid off the height, right... or make it 100%, but when I do so it doesn't work properly?

[B]<div id="vert" style="position:absolute; left:0px; top:0px; width:948px; height:850px; z-index:1;"></div>[/B]
Copy linkTweet thisAlerts:
@toicontienJul 24.2006 — Place the background image as a BG in the BODY element. Then no height hacks have to be included.
Copy linkTweet thisAlerts:
@jamesx521authorJul 24.2006 — Maybe I wasn't referring correctly before. I already have a file that tiles "x" and "y" in the body; it's a small square 10X10 file. [URL=http://www.xn3ct.net/SampleSite04/index.html]http://www.xn3ct.net/SampleSite04/index.html[/URL] I can't put that div that repeats-y in the body tag, right?

So, let's just think of the file that I want to tile "y" as a 948X10 image file in a <div> that needs to be centered horizontally and tiled vertically at the viewer's resolution. That file will be the background for the content (text & img). But the real background is the 10X10 "x" and "y" tiled file:

[B]<body bgcolor="#FFFFFF" background="img/bgricon.gif">[/B]
Copy linkTweet thisAlerts:
@Pixel-ArtistJul 24.2006 — only problem with doing the background way is that ie renders its a pixel off depending on window width which there is s a fix for
×

Success!

Help @jamesx521 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.27,
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,
)...