Need to add a background to a website...help!

25 replies
  • WEB DESIGN
  • |
I have a off-line business website which i want to add a background too, i need idea's and help implementing it. I have designed the website and all the content for the business but it looks a bit boring with the white background so I want to jazz it up a bit.

Can someone help with idea's and implementation?


Thanks
#add #background #websitehelp
  • Profile picture of the author Hthomas
    please tell us what type of your business is? and also give us your website link.
    {{ DiscussionBoard.errors[5264608].message }}
  • Profile picture of the author iluvmoney
    PM you mate.
    {{ DiscussionBoard.errors[5264671].message }}
  • Profile picture of the author kokopelli
    You can add an image as a background, or just change the background color.

    If it is a WordPress site, try this plugin (I use it and it works great): WordPress › Better Backgrounds « WordPress Plugins

    If it is not WP, you can add the code to the stylesheet (CSS file) - see: CSS Background
    Signature
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    {{ DiscussionBoard.errors[5264873].message }}
  • Profile picture of the author spesialis
    most often than not

    put on the bottom of style.css or custom.css

    #wrapper {
    background: url("INSERT IMAGE LINK") no-repeat scroll left top #000000;
    }
    {{ DiscussionBoard.errors[5265093].message }}
    • Profile picture of the author adnank
      Originally Posted by spesialis View Post

      most often than not

      put on the bottom of style.css or custom.css

      #wrapper {
      background: url("INSERT IMAGE LINK") no-repeat scroll left top #000000;
      }
      Or just use Firebug or Code Inspector and find what is exactly class used for "wrapper".
      {{ DiscussionBoard.errors[5267214].message }}
  • Profile picture of the author iluvmoney
    Thanks guy's but i'm still having problem with it! i need someone to do it for me!
    {{ DiscussionBoard.errors[5277402].message }}
    • Profile picture of the author yukon
      Banned
      Originally Posted by iluvmoney View Post

      Thanks guy's but i'm still having problem with it! i need someone to do it for me!
      Post a link & we can show you what CSS to edit.
      Signature
      Hi
      {{ DiscussionBoard.errors[5282411].message }}
  • Profile picture of the author outwest
    you never said if it was a wordpress site or an html site
    Signature
    Tech article writing .Native English Speaker(with Proof)
    specializing in SmartPhones , Internet security, high tech gadgets, search engines, tech shows, digital cameras.

    {{ DiscussionBoard.errors[5277549].message }}
  • Profile picture of the author iluvmoney
    HTML sorry mate
    {{ DiscussionBoard.errors[5279944].message }}
  • Profile picture of the author iluvmoney
    Hi,

    Link below,

    I'm after something on each side of the page to liven it up a bit. I was looking at this before, but it can be anything grey. hxxp://bit.ly/vorHpJ


    Site link:

    hxxp://bit.ly/vO9Lfq
    {{ DiscussionBoard.errors[5283604].message }}
    • Profile picture of the author ronc0011
      I woulld go with an image that can be tiled Do some Googling for Photoshop textures and maybe rust textures The reason I suggest the rust texture is because these tutorials are likely to use techniques that can be used for endless patterns that you can use for tiled backgrounds. To add it to your website add this to your CSS file

      Code:
      body
      {
       background-image:url(/images/yourImage.gif);
       background-repeat:repeat-x repeat-y;
      
      }

      Replace the url path for the image with the path to image you want to use
      {{ DiscussionBoard.errors[5286684].message }}
      • Profile picture of the author stepsG
        Originally Posted by ronc0011 View Post

        I woulld go with an image that can be tiled Do some Googling for Photoshop textures and maybe rust textures The reason I suggest the rust texture is because these tutorials are likely to use techniques that can be used for endless patterns that you can use for tiled backgrounds. To add it to your website add this to your CSS file

        Code:
        body
        {
         background-image:url(/images/yourImage.gif);
         background-repeat:repeat-x repeat-y;
        
        }

        Replace the url path for the image with the path to image you want to use
        but why background-repeat:repeat-x repeat-y; just use background-repeat:repeat; (assuming you want your bg image repeating horizontally and vertically at the same time.)
        {{ DiscussionBoard.errors[5286810].message }}
        • Profile picture of the author sgoerger
          Originally Posted by stepsG View Post

          but why background-repeat:repeat-x repeat-y; just use background-repeat:repeat; (assuming you want your bg image repeating horizontally and vertically at the same time.)
          To simplify even a little more:

          body {background: url(http://yourimagehere.com/images/image.jpg) repeat;}
          {{ DiscussionBoard.errors[5286896].message }}
  • Profile picture of the author iluvmoney
    I'm not sure on what background to get, does it have to be a square image which gets repeated again and again or a whole image?
    {{ DiscussionBoard.errors[5286844].message }}
    • Profile picture of the author stepsG
      Originally Posted by iluvmoney View Post

      I'm not sure on what background to get, does it have to be a square image which gets repeated again and again or a whole image?
      first let me know, what your trying to repeat? a real world big image shot taken by SLRs, or you are trying to repeat a pattern/texture?

      if you want a whole background photograph image then the code would be a bit different.

      so let me know. i will help
      {{ DiscussionBoard.errors[5286869].message }}
  • Profile picture of the author fastcreative
    I'm a Photoshop expert. What kind of image would you like?
    {{ DiscussionBoard.errors[5287505].message }}
  • Profile picture of the author iluvmoney
    Sup guys, hope you all had a good xmas!


    ok I'm after this sort of thing, http://i39.tinypic.com/23mlrhl.jpg did this in PS to show you what I'm thinking of, maybe not exactly that if you guy's have any other good idea's on what background would look good?
    {{ DiscussionBoard.errors[5314919].message }}
  • Profile picture of the author iluvmoney
    Anyone about? this is frustrating me now!
    {{ DiscussionBoard.errors[5316356].message }}
    • Profile picture of the author ronc0011
      Looks to me like that site s using two image each on in a separate div position left and right respectively. The one on the right looks like it's bee divided or sliced if you prefer so that the part beside the header image sits correctly above the rest of it in the right hand div.

      Basically something l like this...

      Code:
      HTML...
       
       
      <div class="header">
      <p>
      All your header stuff goes here
      </p>
      </div>
      <p>
      <div class="leftdiv">
      Left side content 
      </p>
      </div>
       
      <div class="maincontent">
      <p>
      All your main content goes here
      </p>
      </div>
       
      <div class="rightdiv">
      <p>Right hand content goes here
      </p>
      </div>
      
      CSS
      Code:
      .header
      {
      float:left;
      width:98%;
      background-image:url("TopPortionOfRighhthandImage.gif");
      background-position:righttop;
      background-repeat:no-repeat;
      }
      .leftdiv
      {
      float:left;
      width:20%;
      margin:10px0px20px15px;
      background-image:url("http://www.warriorforum.com/images/myimage.gif");
      background-position:lefttop;
      background-repeat:no-repeat;
      }
      .rightdiv
      {
      float:right;
      width:20%;
      margin:10px0px20px15px;
      background-image:url("http://www.warriorforum.com/images/myimage.gif");
      background-position:lefttop;
      background-repeat:no-repeat;
      }
       
      .maincontent
      {
      float:left;
      width:50%;
      margin:10px0px20px15px;
      }
      {{ DiscussionBoard.errors[5317017].message }}
  • Profile picture of the author iluvmoney
    No that's a image I created on photoshop to show what I was after but I have since change my mind,

    I want this hxxp://bit.ly/uJepIO but in both corners and down each side more so I would need someone who's good at PS editing.
    {{ DiscussionBoard.errors[5317626].message }}
  • Profile picture of the author techotalk
    PM me you website url will see what we can do but what exactly you want in your background?
    Signature
    ***Fight with Google Like a Boss****

    Be on Top of the Google at just $5

    Google animal fighting Link pyramid GIG
    {{ DiscussionBoard.errors[5317717].message }}
  • Profile picture of the author iluvmoney
    URL is above just go to the root page
    {{ DiscussionBoard.errors[5317843].message }}
  • Profile picture of the author bryansmith1129
    Learn from w3schools. Here your queries are resolved.
    {{ DiscussionBoard.errors[5321170].message }}
    • Profile picture of the author iluvmoney
      Originally Posted by bryansmith1129 View Post

      Learn from w3schools. Here your queries are resolved.
      Ok thanks for that! Getting your post count up? :rolleyes:
      {{ DiscussionBoard.errors[5321262].message }}
  • Profile picture of the author puedall
    Hi,
    you could use Kompozer to change background in Html.
    Here is the link to my You Tube video..
    Signature
    Build Your Own HTML Website With Free Programs In One Week.
    Specially Created For Beginners Without Programming Experience.
    Step By Step, "Over The Shoulder" - HD Video Training
    http://kompozer-tutorial.com
    {{ DiscussionBoard.errors[5617451].message }}

Trending Topics