Re: [css-d] Two background images on the {body}
Well I have my background image, but to the right of the browser there
is white space, I want to fill in, which is why I asked.
I wanted to take a look at your examples Nancy but they were offline.
Nancy wrote:
From: Christopher [EMAIL PROTECTED]
Can you have two background images on the {body} ? and position them?
No, you can only have one background image per element.
What exactly is the effect you are going for?
You can, for instance, have a background image for the body that is
positioned like:
body {background-image: url(http://www.foo.com/image-left.gif);
background-position: left top; background-repeat:no-repeat;
background-attachment: fixed;}
And then have a wrapper div like:
div#bodydiv {background-image: url(http://www.foo.com/image-right.gif) ;
background-repeat:no-repeat; background-position-x: right;
background-position-y:top; width:100%; height:100%;}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
From: Christopher [EMAIL PROTECTED] Well I have my background image, but to the right of the browser there is white space, I want to fill in, which is why I asked. I wanted to take a look at your examples Nancy but they were offline. Nancy wrote: ... You can, for instance, have a background image for the body that is positioned like: ... And then have a wrapper div like: ... Okay, here's an example: http://thesmudge.com/shapeshifter/test/rightleft.html I embedded the style in the head of the page. Note it's modified slightly from the theoretical example in my previous post. If you play with the size of the window, the images merge. In the actual page there's a middle image as well. Nancy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
Hi Chris
On 23 Jun 2008, at 18:16, Christopher wrote:
Here is a link for the Two background images on the {body}
http://www.walkfar.ca/main3.html
My rough take on it. I haven't done much to the images:
http://cregy.net/test/chris/index.html
--
Kind regards
Richard Brown
http://cregy.co.uk/
Embracing what God does for you is the best thing you can do for Him.
Romans 12 v 1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
#wrapper {
width: 900px;
height: 900px;
background-image:url(graphic%20files/mockup.png);
background-repeat: no-repeat;
}
I don't see the #wrapper graphic when I preview and I just made the same
style as you #wrapper and tried to apply it with my image and nothing
appeared
Richard Brown wrote:
Hi Chris
On 23 Jun 2008, at 18:16, Christopher wrote:
Here is a link for the Two background images on the {body}
http://www.walkfar.ca/main3.html
My rough take on it. I haven't done much to the images:
http://cregy.net/test/chris/index.html
--
Kind regards
Richard Brown
http://cregy.co.uk/
Embracing what God does for you is the best thing you can do for Him.
Romans 12 v 1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
On Mon, 23 Jun 2008 21:47:45 +0100, Christopher [EMAIL PROTECTED]
wrote:
#wrapper {
width: 900px;
height: 900px;
background-image:url(graphic%20files/mockup.png);
background-repeat: no-repeat;
}
I don't see the #wrapper graphic when I preview and I just made the same
style as you #wrapper and tried to apply it with my image and nothing
appeared
Chris,
does this get you any closer to what you want to see.
I have sliced a part of your background image and applied it to a wrapper
div, it fills the screen in the x direction using repeat-x.
Then your original image sits on top of that.
http://mndhill.com/christest/main3.html
Duncan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
Sorry Christopher, I don't want to add extra confusion. I added the slice from your original image as the background on the body and then applied your original using the new wrapper div. http://mndhill.com/christest/main3.html thought it best to clarify for you. Duncan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
Yeah I applied my mock-up image that should be used as the wrapper and I
don't see it, is #wrapper a div
cause I just put that code as seen below this message under the {body}
style. Either way I didn't see my mock up image
that I wanted placed on the right showing up.
Duncan Hill wrote:
On Mon, 23 Jun 2008 21:47:45 +0100, Christopher [EMAIL PROTECTED]
wrote:
#wrapper {
width: 900px;
height: 900px;
background-image:url(graphic%20files/mockup.png);
background-repeat: no-repeat;
}
I don't see the #wrapper graphic when I preview and I just made the same
style as you #wrapper and tried to apply it with my image and nothing
appeared
Chris,
does this get you any closer to what you want to see.
I have sliced a part of your background image and applied it to a wrapper
div, it fills the screen in the x direction using repeat-x.
Then your original image sits on top of that.
http://mndhill.com/christest/main3.html
Duncan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
On Mon, 23 Jun 2008 22:33:15 +0100, Christopher [EMAIL PROTECTED]
wrote:
Yeah I applied my mock-up image that should be used as the wrapper and I
don't see it, is #wrapper a div
cause I just put that code as seen below this message under the {body}
style. Either way I didn't see my mock up image
that I wanted placed on the right showing up.
Chris,
Unless we all come round to your house we can only experiment with what
you give us in the way of published files.
If you look at the code on the example I posted you will see that the
#wrapper is a div that encloses the other items on the page.
The thin slice that I took from the tight hand side of your
backgroundforpage10.png is used to repeat across the page to take care of
any whitespace that is not covered by your large image.
Whatever the mock up image is that you want on the right side, it needs to
be published as a part of the page.
Don't forget, it is only when you publish the files to a server that we
can see them.
Duncan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
Hi Christopher,
you've come through off-list but no matter, only problem is that anyone
else following the thread won't know of any changes.
First off, you mustn't lose sight of the fact that no-one can see changes
that you make to your local files. They must be published to a server for
anyone to be able to suggest modifications or corrections.
As I can't see your mock-up image, I'll go back to the code that I
published as a demo and explain a little of that. I'll put notes in
standard comment notation so it doesn't screw up if you view it in
Dreamweaver.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
title/title
link href=navigationalbar.css rel=stylesheet type=text/css /
style type=text/css
!--
--
body {
background-image: url(backgroundforpage10_cr.png); /* This is a modified
image, a 5px slice taken from your main backgroundforpage10.png image.
It's purpose is to be able to repeat across the width of the screen to
fill any whitespace unfilled by the main image. As it is part of the
original image it should blend reasonably well */
background-repeat:repeat-x; /* the repeat-x makes the image repeat until
it fills the width of the screen */
background-attachment: scroll;
height: auto;
width: auto;
padding: 0; /* padding and margin were set as zero to eliminate the
defaults from the browser */
margin: 0; /* so that the image holds its correct position. */
}
#wrapper{ /* this is styling for the new div that was created to hold your
main backgroundforpage10.png */
background-image: url(backgroundforpage10_cr2.png); /* to remove a step
in the transition between this image and the slice applied to the body I
trimmed this to remove the border on the right edge simply for demo
display purposes */
background-repeat: no-repeat; /* a single image only is required so
no-repeat is needed */
padding: 0; /* once again padding and margin set zero to cancel browser
defaults for positioning purposes */
margin: 0;
}
/style
/head
body
div id=wrapper !-- This is the start of the new div that was placed
to hold the main background image --
div class=menunavigation
div class=contact
pAnimator \ Motion Graphics Artist /p
pContact: [EMAIL PROTECTED] /p
/div
/div
p class=backgnbsp;/p
pnbsp;/p/div !-- This is where the wrapper div ends, you will see
that it encloses all of the other items on the page --
/body
/html
Your HTML and CSS must be capable of working along with each other, the
HTML provides the structure of the page and the 'hooks' to attach the
relevant CSS rules.
Taken in isolation, neither will provide very much, so simply taking my
#wrapper rules may not have had too big an effect.
I have attached the 2 modified image files so you can experiment with them
rather than try to download them from my demo page.
I did not make any changes inside your main CSS file and for now I would
suggest setting up all of your css rules in the head area of the page so
you can experiment more easily.
Once you get fixed with your image layout you should take a deeper look at
your css in the file, things like setting pixel heights for text are not
generally considered good practice and a line height of 2px is not good.
These are items that may give you problems as your page progresses so
worth taking care of as soon as your images are sorted out.
Duncan
On Mon, 23 Jun 2008 23:52:58 +0100, Christopher [EMAIL PROTECTED]
wrote:
Hello Duncan, I have taken your #wrapper from your CSS and used it on my
page (I am using Dreamweaver) and I don't see it when
I preview locally. The only difference is that I replaced your image
with my mock-up image, also what do you mean by #wrapper is a div that
encloses the other items on the page
Christopher
Duncan Hill wrote:
On Mon, 23 Jun 2008 22:33:15 +0100, Christopher
[EMAIL PROTECTED] wrote:
Yeah I applied my mock-up image that should be used as the wrapper and
I
don't see it, is #wrapper a div
cause I just put that code as seen below this message under the {body}
style. Either way I didn't see my mock up image
that I wanted placed on the right showing up.
Chris,
Unless we all come round to your house we can only experiment with
what you give us in the way of published files.
If you look at the code on the example I posted you will see that the
#wrapper is a div that encloses the other items on the page.
The thin slice that I took from the tight hand side of your
backgroundforpage10.png is used to repeat across the page to take care
of any whitespace that is not covered by your large image.
Whatever the mock up image is that you want on the right side, it needs
to be published as a part of the page.
Don't forget, it is only when you publish the files to a server
Re: [css-d] Two background images on the {body}
On 6/22/2008 9:20 AM, Christopher wrote:
Can you have two background images on the {body} ? and position them?
You can have one background on the body and one on html, but I'd
recommend against it. I tried to do this with my site awhile ago, and
found that it crashed the Gecko (Firefox) rendering engine very hard
(full CPU usage followed by a crash). I confirmed in here at the time
that others using any web browser based on Gecko (at least Firefox,
Mozilla, and Netscape at the time) had the same problem (which goes away
if the two backgrounds are the same image, oddly enough). This was back
in late 2006, and I haven't revisited to see if I could do it with a
newer version of Firefox, so I don't know if the bug is fixed. But even
if the bug is fixed, there are always users stuck on old versions of
browsers, and I generally prefer not to use something that I know
_crashes_ any browser at all. :)
You can get the same effect using the body and a div, which I did on
my site at http://www.kungfu-silat.com/ - in my case, it's handled with
these CSS definitions:
BODY { background: #A00 url(pics/DragonBack.gif) repeat-y 1% 0%;
font-family: Arial, Tahoma, sans-serif; color: #000; margin:
0em; height: 100% }
div.secondbackground { background: transparent url(pics/TigerBack.gif)
repeat-y 99% 0%; margin: 0em; min-height: 100% }
--
Erik Harrishttp://www.eHarrisHome.com
-AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172-
Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
Oh, alright I realized something my style on the the body, works out
fine now because of the resolution I have white space
to the far right of the browser I want to fill this with a image.
In dreamweaver I don't see this white blank space, but in the browser I
do so how could I over come this, by putting a image
in that white space but not repeating the style along a X axis ?
Erik Harris wrote:
On 6/22/2008 9:20 AM, Christopher wrote:
Can you have two background images on the {body} ? and position them?
You can have one background on the body and one on html, but I'd
recommend against it. I tried to do this with my site awhile ago, and
found that it crashed the Gecko (Firefox) rendering engine very hard
(full CPU usage followed by a crash). I confirmed in here at the time
that others using any web browser based on Gecko (at least Firefox,
Mozilla, and Netscape at the time) had the same problem (which goes away
if the two backgrounds are the same image, oddly enough). This was back
in late 2006, and I haven't revisited to see if I could do it with a
newer version of Firefox, so I don't know if the bug is fixed. But even
if the bug is fixed, there are always users stuck on old versions of
browsers, and I generally prefer not to use something that I know
_crashes_ any browser at all. :)
You can get the same effect using the body and a div, which I did on
my site at http://www.kungfu-silat.com/ - in my case, it's handled with
these CSS definitions:
BODY { background: #A00 url(pics/DragonBack.gif) repeat-y 1% 0%;
font-family: Arial, Tahoma, sans-serif; color: #000; margin:
0em; height: 100% }
div.secondbackground { background: transparent url(pics/TigerBack.gif)
repeat-y 99% 0%; margin: 0em; min-height: 100% }
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
Christopher wrote: Oh, alright I realized something my style on the the body, works out fine now because of the resolution I have white space to the far right of the browser I want to fill this with a image. In dreamweaver I don't see this white blank space, but in the browser I do so how could I over come this, by putting a image in that white space but not repeating the style along a X axis ? Put the page in question on public server and provide a clickable link to it in your post to the list. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two background images on the {body}
From: Christopher [EMAIL PROTECTED]
Can you have two background images on the {body} ? and position them?
No, you can only have one background image per element.
What exactly is the effect you are going for?
You can, for instance, have a background image for the body that is
positioned like:
body {background-image: url(http://www.foo.com/image-left.gif);
background-position: left top; background-repeat:no-repeat;
background-attachment: fixed;}
And then have a wrapper div like:
div#bodydiv {background-image: url(http://www.foo.com/image-right.gif) ;
background-repeat:no-repeat; background-position-x: right;
background-position-y:top; width:100%; height:100%;}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
