Jump to content


Background problem

Started by Iysha, Aug 14 2005 01:39 PM

12 replies to this topic

#1 Iysha

    Young Padawan

  • Members
  • Pip
  • 291 posts
  • Gender:Male
  • Location:london

Posted 14 August 2005 - 01:39 PM

Ok well ive designed this site and i used a background which i thought would fit.

but it turns out that i used more of the page than i expected so now the background dosent fit

How can i change the background for i have already saved it as a template

Cheers

#2 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 14 August 2005 - 02:31 PM

example? ;) it sounds to me like you made, for example, a gradient background from one color to another and you made it extra long so it wouldnt repeat right? but you made too much content and it DID repeat? if thats the problem, css would fix it, but i gotta know the problem first

#3 Iysha

    Young Padawan

  • Members
  • Pip
  • 291 posts
  • Gender:Male
  • Location:london

Posted 14 August 2005 - 02:32 PM

yes you got it in 1

thats exactly my problem

#4 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 14 August 2005 - 04:38 PM

add this into the between the <head></head>

<style type="text/css">
body{
    background:url(address/to/bg.gif) #fff;
    repeat:repeat-x;
}

that makes the background image repeat itself only horizontically, so just change "#fff" with whatever color you want the bg to be after the image stops.

heres a tutorial i made a while back that goes really indepth on it
http://www.scudworkz...ls/backgrounds/

#5 Iysha

    Young Padawan

  • Members
  • Pip
  • 291 posts
  • Gender:Male
  • Location:london

Posted 14 August 2005 - 05:23 PM

actually coolaid (or anyone else who could help)

is there a way that you can repeat the image but have the image upside down.

So the gradient blends in

Cheers

#6 Av-

    I Feel Left Out

  • Members
  • PipPipPipPip
  • 1,971 posts
  • Gender:Male
  • Location:10 ft. below sea level

Posted 14 August 2005 - 05:54 PM

ugh, ive tried that before and i can tell ya, it looks like shit lol. anyways, if u really want to do that, just use photoshop, double the height then duplicate and flip the image and place it under the other half

#7 Silwolffe

    P2L Jedi

  • Members
  • PipPipPip
  • 707 posts
  • Gender:Male
  • Location:Florida, USA

Posted 14 August 2005 - 07:19 PM

Well, what I would do is type down the following CSS rule (replace certain variables with your own);

body {
	background: url(images/splash_background.gif) repeat-x #ABC6E1;
	margin: 0px;
	padding: 0px;
}
'background' is a 'short-hand' property, I incorporated all background properties in one simple property rule. Basically, I have the splash_background.gif gradient image repeat along the X-Axis, and it's automatically placed up at the top of the webpagfe, and the hexidecimal color is the color in which the gradient flows into.

Hope this helps you. ;)

EDIT: Basically what Cool-aid said. :S

Edited by Silwolffe, 14 August 2005 - 07:20 PM.

#8 Iysha

    Young Padawan

  • Members
  • Pip
  • 291 posts
  • Gender:Male
  • Location:london

Posted 15 August 2005 - 06:16 AM

Cheers guys

#9 Av-

    I Feel Left Out

  • Members
  • PipPipPipPip
  • 1,971 posts
  • Gender:Male
  • Location:10 ft. below sea level

Posted 15 August 2005 - 08:50 AM

this is actually really usefull, how can i make blend into another background, instead a solid bg color

edit: or is there anyway to x-repeat the background in a table?

Edited by Avalanche, 15 August 2005 - 09:04 AM.

#10 Silwolffe

    P2L Jedi

  • Members
  • PipPipPip
  • 707 posts
  • Gender:Male
  • Location:Florida, USA

Posted 15 August 2005 - 10:04 AM

you cannot make it 'blend' into another background image. You can have a background color and have the one background image along the x-axis.

Make sure the background color matches the hexidecimal value of the last pixel color one the bottom of your gradient image, that way you have a nice, consistent flow.

Example:
------------------------------------
Background Image; Repeat-X
------------------------------------
Background color (default value is repeat, so it naturally goes everywhere).

Keep in mind, that in my CSS code I use shorthand-properties, so you wont see something like;


body {
    background-image: url(images/LOLZ.gif);
    background-color: #FFF111;
    background-repeat: repeat-x;
    padding-top: 1px;
    padding-right: 2px;
    padding-bottom: 3px;
    padding-left: 4px;
    margin-top: 1px;
    margin-right: 2px;
    margin-bottom: 3px;
    margin-left: 4px;
}

See how long that is? Here is the exact same thing put into a shorthand-property.

body {
    background: url(images/LOLZ.gif) #FFF111 repeat-x
    padding: 1px 2px 3px 4px
    margin: 1px 2px 3px 4px
}

Now it's simple. :P

EDIT: From what I mean by only one background, is, you can only define one background for every style rule you create. Basically, you will want to set your background properties with your <body> element type selector for your CSS rule. However, if you try and give your <body> tag multiple backgrounds by creating new IDs/Classes and placing them in <div> tags with a low z-index value, I don't think you're going to win.


And I hope this helps you in some way, sorry if I'm not too good at explaining it. If you're still confused, I'll try to explain it again unless someone else wants to step in.

Edited by Silwolffe, 15 August 2005 - 10:19 AM.

#11 Av-

    I Feel Left Out

  • Members
  • PipPipPipPip
  • 1,971 posts
  • Gender:Male
  • Location:10 ft. below sea level

Posted 15 August 2005 - 11:14 AM

u explained it really well :ph34r:
and how about a table background, can u also reapeat table bg's along the x
lol,i hope i make any sense

#12 Silwolffe

    P2L Jedi

  • Members
  • PipPipPip
  • 707 posts
  • Gender:Male
  • Location:Florida, USA

Posted 15 August 2005 - 02:18 PM

You can apply CSS styles to tables.

td {
    background: url(images/lolz.gif) #FFF111 repeat-x;
}

td is a table cell HTML tag, and with the CSS rule all your table cells will be fitted with that background and repeat along the x axis. :lol:

Or, if you want, you can define a special class that can only be applied to td tags;

 td.special {
    background: url(images/lolz.gif) #FFF111 repeat-x;
}

You would define the class in your html like so;

<table width="200" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="special">nummy text</td>
   </tr>
</table>

#13 Av-

    I Feel Left Out

  • Members
  • PipPipPipPip
  • 1,971 posts
  • Gender:Male
  • Location:10 ft. below sea level

Posted 15 August 2005 - 03:36 PM

thanks, thats what i needed :lol:
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design