jinzleftbuttcheek
Esso Bea
Registered: 05-2006
Location: Nineth Level of Hell
Posts: 296
Karma: 8 (+8/-0)
|
Reply | Quote
|
|
Background problem
I'm looking at a new background I want to incorporate but I can't get it right. The bottom is cut off as shown here http://com2.runboard.com/bjinzystestsite and you can't see that it is an island. Is there anything that I can do to make the picture more centered? If I had to choose I'd rather it be cropped at the top, not the bottom.
---
Friendship is precious, not only in the shade, but in the sunshine of life. ~Thomas Jefferson
|
1/15/2007, 1:47 am
|
Link to post
Email jinzleftbuttcheek
PM jinzleftbuttcheek
Yahoo
|
The Mooseman
A Posting Machine
Registered: 03-2005
Location: Looking for my brain...
Posts: 3416
Karma: 143 (+154/-11)
|
Reply | Quote
|
|
Re: Background problem
Your testboard is full of html and css errors, but as you say, its a testboard.
In your HTML section you have eg this :
<style type="text/css">
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-color:719fc3;
background-image:url(http://i23.photobucket.com/albums/b369/pinkbunnyslippers/island3.jpg);
background-attachment: fixed;
background-position:top left;
background-repeat:yes-repeat;
border-color:719fc3;
border-width:0px ;
border-style: solid;
scrollbar-face-color:aacf2b;
scrollbar-highlight-color:ffffff;
scrollbar-3dlight-color:03066f;
scrollbar-shadow-color:404040;
scrollbar-darkshadow-color:ffffff;
scrollbar-arrow-color:ffcbdc;
scrollbar-track-color:719fc3;
}
No need to put CSS in there using the <style> tags. Thats what CSS is for.
Anyway :
To keep on topic , change this
background-repeat:yes-repeat;
to this
background-repeat:no-repeat;
and change
background-position:top left;
to
background-position:center;
Should make one picture only in the middle
--- ~ Quickly, I must hurry, for there go my people and I am their leader ~
|
1/15/2007, 7:43 am
|
Link to post
PM The Mooseman
|
jinzleftbuttcheek
Esso Bea
Registered: 05-2006
Location: Nineth Level of Hell
Posts: 296
Karma: 8 (+8/-0)
|
Reply | Quote
|
|
Re: Background problem
thanks moosey
but now it doesn't fit right.
Last edited by jinzleftbuttcheek, 1/15/2007, 11:15 am
---
Friendship is precious, not only in the shade, but in the sunshine of life. ~Thomas Jefferson
|
1/15/2007, 11:06 am
|
Link to post
Email jinzleftbuttcheek
PM jinzleftbuttcheek
Yahoo
|
The Mooseman
A Posting Machine
Registered: 03-2005
Location: Looking for my brain...
Posts: 3416
Karma: 143 (+154/-11)
|
Reply | Quote
|
|
Re: Background problem
Of course not, because an image has a preset width and height.
Find a pic big enough to fit 1024 width screen
--- ~ Quickly, I must hurry, for there go my people and I am their leader ~
|
1/15/2007, 12:39 pm
|
Link to post
PM The Mooseman
|
jinzleftbuttcheek
Esso Bea
Registered: 05-2006
Location: Nineth Level of Hell
Posts: 296
Karma: 8 (+8/-0)
|
Reply | Quote
|
|
Re: Background problem
The image was wide enough. I do know enough to get the right size background. It filled the screen before I changed anything. I reset my CSS back to what it orginally was and that seemed to fix the problem.
---
Friendship is precious, not only in the shade, but in the sunshine of life. ~Thomas Jefferson
|
1/15/2007, 3:41 pm
|
Link to post
Email jinzleftbuttcheek
PM jinzleftbuttcheek
Yahoo
|
The Mooseman
A Posting Machine
Registered: 03-2005
Location: Looking for my brain...
Posts: 3416
Karma: 143 (+154/-11)
|
Reply | Quote
|
|
Re: Background problem
quote: jinzleftbuttcheek wrote:
The image was wide enough. I do know enough to get the right size background. It filled the screen before I changed anything.
The original image was 800x600 :
Most ppl use 1024*768 screen resolution, and then the image will be placed in the middle with lots of body background color all around
So, your image isnt wide enough to fit most screens
By using photos like you have now,repeating itself, the pages looks like they are glued together.
Not good..
Thats why I suggested a bigger photo...
--- ~ Quickly, I must hurry, for there go my people and I am their leader ~
|
1/15/2007, 5:38 pm
|
Link to post
PM The Mooseman
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26739
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: Background problem
Now it looks very cute in 1024×768, but very strange in 1280×720, 1280×1024, and larger. That's one of the major problems of people using different resolutions, it makes it difficult to be creative.
It's too bad they haven't come out with CSS3 yet.
|
1/22/2007, 3:48 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
The Mooseman
A Posting Machine
Registered: 03-2005
Location: Looking for my brain...
Posts: 3416
Karma: 143 (+154/-11)
|
Reply | Quote
|
|
Re: Background problem
Yup
In case anyone wonder, CSS3 will have the option to have more than one background image, amongst other neat stuff
--- ~ Quickly, I must hurry, for there go my people and I am their leader ~
|
1/23/2007, 4:21 pm
|
Link to post
PM The Mooseman
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10257
Karma: 272 (+331/-59)
|
Reply | Quote
|
|
Re: Background problem
So why not place the image on the page instead of having it as a background image? If it is on the page as a graphic image then you can stretch it and shrink it with something like:
--- in the css ---
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
and
--- in the html header ---
<div id="bg_image">
<img src="images/scenery.jpg" style="width: 100%; height: 100%;">
</div>
Course it might look funny in other resolutions so you might not like that...
Last edited by Pastor Rick, 6/4/2008, 12:16 pm
|
1/25/2007, 3:45 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
The Mooseman
A Posting Machine
Registered: 03-2005
Location: Looking for my brain...
Posts: 3416
Karma: 143 (+154/-11)
|
Reply | Quote
|
|
Re: Background problem
quote: Pastor Rick wrote:
So why not place the image on the page instead of having it as a background image? If it is on the page a a graphic image then you can stretch it and shrink it with something like:
--- in the css ---
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
and
--- in the html header ---
<div id="bg_image">
<img src="images/scenery.jpg" style="width: 100%; height: 100%;">
</div>
Course it might look funny in other resolutions so you might not like that...
Why style an image in the HTML section ?? Why not add it in the CSS ?? Why use HTML to modify an image ??
Make the image the size you want up front, then upload it and do something like this :
--- in the css ---
#bg_image {display:block;
position: absolute;
left: 0px;
top: 0px;
background:url(images/scenery.jpg) no-repeat;
width: 100%;
height: 100%;
z-index:0;
}
--- in the html header ---
<div id="bg_image"></div>
--- ~ Quickly, I must hurry, for there go my people and I am their leader ~
|
1/29/2007, 7:55 am
|
Link to post
PM The Mooseman
|