CSS Backgrounds

martinm92 · 07-06-2012, 01:47 PM

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.

donnysobonny · 07-06-2012, 04:40 PM

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?

martinm92 · 07-07-2012, 11:19 AM

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 :/

donnysobonny · 07-07-2012, 12:55 PM

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.

Major Payne · 07-07-2012, 05:55 PM

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;">

martinm92 · 07-08-2012, 04:32 PM

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.

Major Payne · 07-08-2012, 05:27 PM

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.

martinm92 · 07-08-2012, 05:38 PM

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.

Major Payne · 07-08-2012, 05:47 PM

Quote:

Originally Posted by martinm92

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.

martinm92 · 07-08-2012, 05:52 PM

Haha ok.

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

http://steppinout.me.uk/

Major Payne · 07-08-2012, 10:02 PM

You want just this background to expand with content? The green portion past the white?

http://steppinout.me.uk/images/backgroundTop.png

Major Payne · 07-08-2012, 11:57 PM

Will this work for you:

Steppin' Out

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

Major Payne · 07-11-2012, 01:55 PM

Guess you lost interest. Will be deleting your pages from my site soon.

Major Payne · 07-12-2012, 02:34 AM

Have deleted your pages from my web site since you no longer seem interested.