4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

??? Question about how to create this background for a website.....

by LastingLifeSuccess
3 replies
  • WEB DESIGN
    • |
Hi Warriors,

I need to create a certain look to the background of my website. I don't really know how to explain, so I'll do my best to be clear.

I need to change the fade out on the background of my site (Soul Canyon; Life Coaching, Self Help, Law of Attraction) from teal to white and make it teal to orange. The teal to orange gradient needs to expand on the entire screen. In other words the gradient needs to go all the way from the edge of the border fading into orange by the end of the person viewing's window.

I do know how to create the gradient in photoshop... the issue is how am I supposed to write it into the html...

I supposed I could just create a column for it... but how do I specify width, when everyone's computer screens are different sizes.

Also... if it is just a matter of making the width for the column bigger... will the website show up funny on someone's window if the window isn't maximized? Would there be a way to align the webpage to be in the center if someone opens the page with a non-maximized window? I know that's being really picky... but I just hate webpages that you open up and then have to adjust the horizontal scoll bar to find it.

Hope I was clear!!! Thanks for any advice....

Rebecca
#background #create #question #website
  • Profile picture of the author mr_banks
    well I'm not really sure what it is that you are asking. It sounds to me like you just want to change the background you already have to a different color. When I took a look at your site it did what you say you want it to do. When I resize my browser window your site stays in the center along with the background image. However it is limited to the width of your table. once my browser window shrinks to that size your content disappears out of the window. There is no way around that if you use tables for your layout.
    To answer what I believe it is that you are asking and just want a better way to put the bg in. this would be my solution.

    I would wrap everything in a div tag <div> and give it an ID of main-bg.
    it would look like this <div id="main-bg">.
    you already have your content wraped in a div tag so just give the <div> tag right under your opening <body> tag the id and remove the align=center. you are going to give it that attribute with CSS.
    then in your styles in your head tag add this.
    #main-bg {
    background:url(this_is_the_file_path_to_the_image. jpg) repeat y;
    text-align:center;
    width:100%;
    }

    for your image use an image that spans the width of the screen with the gradients that you want. what you will then want to do is cut out a thin slice of that image so will have a long horizontal sliver of your gradient that when repeated along the y axis the screen will form a solid image. (this reduced that file size and is considered best practice.)

    this creats a fluid container with your gradient as the background that the main content of your site sits in. the container will adjust itself to the width of the screen and stay in the center until the screen becomes smaller than the width of your table.
    {{ DiscussionBoard.errors[630655].message }}
  • Profile picture of the author awesometbn
    Hello Rebecca,
    My recommendation would be to make the default background color orange, then edit the border_left.png and border_right.png to replace the white color with orange. On your website, the fade will appear to stretch from the edge of the border to the end of the browser's window. This should be a simple edit. Unless I misunderstood what you are asking about.
    {{ DiscussionBoard.errors[630660].message }}
    • Profile picture of the author LastingLifeSuccess
      Originally Posted by awesometbn View Post

      Hello Rebecca,
      My recommendation would be to make the default background color orange, then edit the border_left.png and border_right.png to replace the white color with orange. On your website, the fade will appear to stretch from the edge of the border to the end of the browser's window. This should be a simple edit. Unless I misunderstood what you are asking about.
      that's an awesome idea... thanks!!!!
      Signature
      "How To Make $4,000-$8,000 Finder's Fees Snooping Around Public Records"
      {{ DiscussionBoard.errors[630728].message }}

Trending Topics