473,221 Members | 2,132 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,221 software developers and data experts.

Selective background tiling - this may be tricky.

Hello all,

I need somehelp with background tiling. I have a sneaking suspicion that
what I want to do is not possible, but I'll ask anyway. :>) First some
background: Here's the site in question: www.sayatnova.com (I'm sure many of
you have seen this before as I've often asked for help).

I've come a long way since I first created the site many moons ago and I'm
trying to convert it to a (1) Table-less, (2) Frame-less and (3) Validated
Strict design. Item #1 is done, #3 is mostly done (Loose standard because of
the frames), but #2 is *almost* done. I've dropped from three frames to two
by finding a better menu system and moving the menu out of a frame.

I have a frame on the left and I'm trying to remove it while retaining the
site's look. Some of the pages (About Us, FAQ, Mission Statement and others)
have a tiled image as the background. Since the page is loaded in a separate
frame, it can be tiled indefinitely when the window is resized.

I've played around with the page in no frames. I can get the <div>
positioning I want, but the background is more difficult. I need to tile the
background throughout the whole page while keeping the left side (and
preferably the top) black. At first, I tried this:

background: #000000 url('images/background.jpg') repeat 250px 50px;

I thought this would *start* tiling the background from left=250px and
top=50px, leaving the rest black. Instead, it *centered* the image at those
points and the image still wrapped around and tiled the background around
the whole page. Then, I tried this:

background: #000000 url('images/background.jpg') repeat-y 250px 50px;

This time I got the left side black, but that was only as good as the image
width. When I resized the screen to 1280 x 1024, the image was centered down
the middle and there was black on both sides.

What I need to do is have the image start tiling indefinitly starting at
left=250px and top=50px, but *not* wrap around and cover the whoe page. I've
done some research but I suspect that it can't be done using css.

My only other option, which I'd like to avoid if possible, is to create a
background image that's 1280x1024 in size and use "background: #000000
url('images/background.jpg') repeat-y 250px" to vertically tile it. At
smaller resolutions the background will clip, and it will still cover the
page when the screen is resized upwards. The drawback, of course, is that
the file size for an image that large is too big for a background and would
slow down the page. And, what if someone were to view the site at 1600x1200?
I'd be stuck with the same problem.

I've tried putting the background in the Container and Content div's, but
again, that's imperfect. The div's grow and shrink with their content,
leaving awkward and uneven looking black spaces where I don't want them.

So....how can I acheive my goal using css? I'm hoping that someone out
there will whip out a little known command and save my day! :>) I have a
feeling that I'll need to use the large background image.

Thanks in advance...

--
Viken K.
Dec 13 '05 #1
3 3196
Els
Viken Karaguesian wrote:
Hello all,

I need somehelp with background tiling. I have a sneaking suspicion that
what I want to do is not possible, but I'll ask anyway. :>) First some
background: Here's the site in question: www.sayatnova.com (I'm sure many of
you have seen this before as I've often asked for help).

I've come a long way since I first created the site many moons ago and I'm
trying to convert it to a (1) Table-less, (2) Frame-less and (3) Validated
Strict design. Item #1 is done, #3 is mostly done (Loose standard because of
the frames), but #2 is *almost* done. I've dropped from three frames to two
by finding a better menu system and moving the menu out of a frame.

I have a frame on the left and I'm trying to remove it while retaining the
site's look. Some of the pages (About Us, FAQ, Mission Statement and others)
have a tiled image as the background. Since the page is loaded in a separate
frame, it can be tiled indefinitely when the window is resized.

I've played around with the page in no frames. I can get the <div>
positioning I want, but the background is more difficult. I need to tile the
background throughout the whole page while keeping the left side (and
preferably the top) black. At first, I tried this:

background: #000000 url('images/background.jpg') repeat 250px 50px;

I thought this would *start* tiling the background from left=250px and
top=50px, leaving the rest black. Instead, it *centered* the image at those
points and the image still wrapped around and tiled the background around
the whole page. Then, I tried this:

background: #000000 url('images/background.jpg') repeat-y 250px 50px;

This time I got the left side black, but that was only as good as the image
width. When I resized the screen to 1280 x 1024, the image was centered down
the middle and there was black on both sides.

What I need to do is have the image start tiling indefinitly starting at
left=250px and top=50px, but *not* wrap around and cover the whoe page. I've
done some research but I suspect that it can't be done using css.

My only other option, which I'd like to avoid if possible, is to create a
background image that's 1280x1024 in size and use "background: #000000
url('images/background.jpg') repeat-y 250px" to vertically tile it. At
smaller resolutions the background will clip, and it will still cover the
page when the screen is resized upwards. The drawback, of course, is that
the file size for an image that large is too big for a background and would
slow down the page. And, what if someone were to view the site at 1600x1200?
I'd be stuck with the same problem.

I've tried putting the background in the Container and Content div's, but
again, that's imperfect. The div's grow and shrink with their content,
leaving awkward and uneven looking black spaces where I don't want them.

So....how can I acheive my goal using css? I'm hoping that someone out
there will whip out a little known command and save my day! :>) I have a
feeling that I'll need to use the large background image.


It's doable if you're willing to add two more divs to your pages.

<body>
<div id="outer">
<div id="inner">
whatever you have on your page already
</div
</div>
</body>

body{
background: #000000 url('images/background.jpg');
}
#outer{
background: #000000 url('images/background-y.jpg') repeat-y top left;
}
#inner{
background: #000000 url('images/background-x.jpg') repeat-x top left;
}

background-y.jpg should be black and 250px wide, while
background-x.jpg should be black and 50px high.

Not tested.
Known issues: without setting a height to the #inner and #outer and
body and html, the black vertical bar will stop at the bottom of your
content.
Setting all four elements to 100% height will make the vertical black
bar stop before the end of the viewport if the page is higher than the
viewport in some browsers. There are ways to prevent that from
happening, but I can't remember how off the top of my head atm. I'm
sure someone else knows though, and I think you can make it work.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Dec 13 '05 #2
> It's doable if you're willing to add two more divs to your pages.

I have no problem with that :>)
Not tested.
Known issues: without setting a height to the #inner and #outer and
body and html, the black vertical bar will stop at the bottom of your
content.
Yes. That's what I've been fighting. If I set to 100%, it only spans as far
as the content. If I set fixed height and width, then the div's won't
resize according to the screen size.
Setting all four elements to 100% height will make the vertical black
bar stop before the end of the viewport if the page is higher than the
viewport in some browsers.


Sorry, I'm not sure what you mean by viewport :>( Are you referring to the
viewing area?

Sometimes, I wish that 100% meant 100% of the *page*, so If I set a <div> to
height: 100%, it will span 100% of the page's height, regardless of whether
the content does or not. That would make some things much easier.

Viken K.
Dec 14 '05 #3

"Viken Karaguesian" <vikenkNO_SPAM@NO_SPAMcomcast.net> wrote in message
news:jI********************@comcast.com...
Sometimes, I wish that 100% meant 100% of the *page*, so If I set a <div> to height: 100%, it will span 100% of the page's height, regardless of whether the content does or not. That would make some things much easier.


Try looking at background attatchment. This might allow the background
images to "pretend" to be the full size by not moving when you scroll

http://www.w3.org/TR/CSS21/colors.ht...und-attachment

--
Martin Eyles
ma**********@NOSPAM.bytronic.com
Dec 14 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: lorelei | last post by:
Hey all, I have found two seperate HTML codes which claim to stop background images from being tiled. Neither of them seem to be working. I'm writing my codes in Textpad, and use Internet...
27
by: Kevin Yu | last post by:
When I declare on HTML page <LINK href="mycss.css" type="text/css" rel=stylesheet /> .... <BODY class=myclass> in mycss.css BODY { FONT-WEIGHT: bold; FONT-SIZE: 12px; FONT-FAMILY:...
8
by: Ron Holmes | last post by:
I want to place a background image on a windows form. Is there a way to prevent the image from Tiling without using an image box resized to the size of the form? I am using Visual Studio 2003...
3
by: Sridhar | last post by:
Hi, I have created a user control which has the html code as follows <TABLE id="ToolBarTable" cellSpacing="0" cellPadding="0" width="100%" border="0"> <tr> <td align="right"...
16
by: Walker | last post by:
I have a span containing two words. Eg. <span>Avant Garde</span> Using CSS, I pad the text to the right and assign a background-image. Eg. span { padding: 0 3px 0 11px; background:...
2
by: bissatch | last post by:
Hi, I am running a w3c CSS validation check on a site in development. I have many errors saying that my CSS is not valid because I have not defined the background-color but instead left it...
0
by: kirby.urner | last post by:
Probably a fault line or cultural divide between acutely differing schools of thought, is in this area of tiling or mosaic making. Some schools consider this a stupid waste of time, others a core...
7
by: Nik Coughlin | last post by:
One thing that has always annoyed me, and I just design around it, is having a tile that you want to use for your background image that doesn't seamlessly tile, in a container that you want to be...
4
by: Bob Altman | last post by:
Hi all, I posted an earlier question to the microsoft.public.inetserver.asp.general newsgroup asking how to set the background of a client-side table cell to a gradient, and I received this...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.