Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14

Thread: CSS Backgrounds

  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Backgrounds

    Im having a real trouble finding a way to do my background.. from my psd. I've done this thing before but everything I try is just not working.. Any suggestions how anyone would go about doing this background.


  • #2
    New Coder
    Join Date
    Jun 2012
    Posts
    44
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Hi there,

    Do you mean how to design a background that looks like the image background, or how to create insert a background like this within the html/css of a web page?
    Donny Sutherland
    Chief Designer and Managing Director
    pixelpug.co.uk

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ye I have this as a psd and I want to convert that background into html/css.. however I can't seem to do it the way I want it :/

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    44
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Okay,

    Well ideally the background within the psd would be a layer that you can isolate so that you can save it as a jpeg and use it as a background for a website.

    I have little information to go on here. Out of interest, have you built the website already but are simply looking to have this as your background? If not can you please give more details.
    Donny Sutherland
    Chief Designer and Managing Director
    pixelpug.co.uk

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    May help:

    Online PSD to HTML Converters (Some Free):

    http://jadii.com/ (May be free)

    40 Options for Converting PSD to HTML - http://vandelaydesign.com/blog/desig...html-services/

    From PSD to HTML: Building a Set of Website Designs Step by Step: http://nettuts.com/site-builds/from-...-step-by-step/

    Or...

    Background Image Code:

    For the body tag example:

    Code:
    body {
    width: XXXpx;
    height: YYYpx; /* optional */
    margin: 0 auto; /* centers page */
    background: #fff url(image_name.jpg) no-repeat center scroll;
    }
    That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS on an external CSS file (Between the head tags of each page: <link rel="stylesheet" type="text/css" href="css-file-name.css">). If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.

    For a tiled image, change to:

    Code:
    body {
    width: XXpx;
    height: YYpx;
    margin: 0 auto;
    background: #fff url(image_name.jpg) repeat top left scroll;
    }
    Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".

    Inline background image styling:
    Code:
    Inline CSS example: <body style="width: 960px; margin: 0 auto; background: url(image.gif) no-repeat center fixed;">
    Inline CSS example: <body style="width: 960px; margin: 0 auto; background: url(image.jpg) no-repeat center scroll;">
    Last edited by Major Payne; 07-07-2012 at 05:58 PM. Reason: Added code.
    ☠ ☠RON☠ ☠

  • #6
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem I have at the moment is that I want some of the background to stretch as I enter the content. So it will get bigger or small depending on how much information is entered. The bit that will expand would be the brown part.

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    That's where image slices come in. Might have one as part of the header, one as part of the footer and the one in the middle would repeat vertically in keeping with the amount of content on the page.

    Your initial post seems to have a content container over the background so can't tell how you would slice it. Really don't not sure if you are referring to the main page background image or any background used in the content container. Many times I use a good graphics editor to get out of this dilemma by redoing the graphics to make it easier to code and to "stretch" with content. Maybe give a link to the psd file(s) and someone could do some work with it. I would have to convert the PSD to JPG to edit it.
    ☠ ☠RON☠ ☠

  • #8
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what I have gone for, this will work, however I won't get the texture on the brown as it does in the psd.

    Code:
    body {
    	background-image: url('images/backgroundTop.png');
    	background-repeat: repeat-x;
    	background-color: #a3824e;
    }
    The rest of the content I will do in css I think.

  • #9
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Quote Originally Posted by martinm92 View Post
    This is what I have gone for, this will work, however I won't get the texture on the brown as it does in the psd.

    Code:
    body {
    	background-image: url('images/backgroundTop.png');
    	background-repeat: repeat-x;
    	background-color: #a3824e;
    }
    The rest of the content I will do in css I think.
    That is CSS. Without images and HTML/CSS you've start, it's hard to help. If the work is online, a link to it would be better as images normally use relative paths and will not show on someone else's machinewith just the code.
    ☠ ☠RON☠ ☠

  • #10
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Haha ok.

    This is what I have so far, which doesn't look to bad I don't think

    http://steppinout.me.uk/

  • #11
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    You want just this background to expand with content? The green portion past the white?

    http://steppinout.me.uk/images/backgroundTop.png
    Last edited by Major Payne; 07-08-2012 at 10:49 PM.
    ☠ ☠RON☠ ☠

  • #12
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Will this work for you:

    Steppin' Out

    Re-did the "featured image", CSS and HTML, too.
    ☠ ☠RON☠ ☠

  • #13
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Guess you lost interest. Will be deleting your pages from my site soon.
    ☠ ☠RON☠ ☠

  • #14
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Have deleted your pages from my web site since you no longer seem interested.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •