View Full Version : How would you code this background?

06-24-2010, 07:03 AM
Hi there.
Im new to website design and need help.
how would you code this background (attached) in your html/css? just put this image as a background?
I thought of multiple divs, but line crossings have some gradient there, also diagonal lines are not easy to manage (am i wrong?)
Its about 30kb...i think its waste of users' traffic.

Thank you!

06-24-2010, 07:22 AM
Put the picture in the same folder as your HTML/CSS page, then put this code somewhere in your CSS Page

body { background-image:url("INSERT IMAGE NAME HERE"); }

if you want to make it repeated, then make it like this

body { background-image:url("INSERT IMAGE NAME HERE");
background-repeat: repeat; }

If you need any other things such as making the image fixed, then just ask.

06-24-2010, 09:29 AM
Thanks for your reply.

I know how to put picture as a backgound image, im asking about optimizing it. Do you see anyway of making this image repeating?

Is it a normal practice to make the whole background as a one image?

06-24-2010, 09:41 AM
A larger image results in larger image size, and thus slower page load speed, which in this case, the background image can only affect dial-up users.
But totally, I don't think there's any considerable difference.

Also consider that your image is totally black now, and if you add some contents, it's size increases much more than it's current size.

Also, if you wanna make your background black, why do you wanna use this "image"?

Simply use CSS:

background-color: #000000;

I don't see any more ambiguity in your question.

06-24-2010, 09:53 AM
Thanks for your reply! I appreciate it!

I don't wanna use a black background. i want to use the background i provided. I just want to create this backgound with html&css only if its possible. if its not i want to know the best solution to this problem.

Thank You

06-24-2010, 10:12 AM
I don't know any better solution, I think it's the best. I've used this method in Skills Competition and I have earned the score.

This is the best thing you could do. DSL / Leased / Satellite users don't have slightest problem, for dial-up users, it takes 3-4 seconds to load, which is not considerable yet.

Also, be a little more realistic. Number of DSL users nowadays is more than Dial-up users, and also these few kilobytes don't bother anyone or waste someone's traffic.

06-24-2010, 10:35 AM
what about different screen(browser) resolutions?
It seems kinda unprofessional....

06-24-2010, 10:48 AM
Assuming you have made this image yourself, it may be worth making the bottom part of the image fade to black. That way, you can put the page background colour as black, but have that image repeat along the x axis at the top

That way, if your visitors have a large screen resolution it will look seamless, as it fades to black at the bottom and continues to be black beyond the image.

If you wanted to repeat the image along the X and Y axis (down and across the page) you'd need an image which can be tiled in such a way. In the brief look I took, it doesn't seem as though that image would tile vertically.

06-24-2010, 10:50 AM
You could reduce the size of your background image somewhat by decreasing the quality using Photoshop or similar. It's not exactly huge at 30k or so at the moment but you could probably half that if it's a concern.

Regarding differing screen sizes, and what happens if the viewport is greater than the background image, you've got a couple of choices. You could repeat the background image either vertically or horizontally or both - but your image doesn't really lend itself to that. Alternatively, centre the background image, don't repeat it and have a complementary background colour for the rest of the page.

For example, if you have markup something like:

<div id="wrap">

then set your background image as:

#wrap{background:#000000 url(/path/to/image.jpg) no-repeat top center}

so the #wrap div has a black background to complement the image.

06-24-2010, 01:17 PM
Thank you for your replies!

I cannot fade bottom part to black because it is a design concept.
Do you think this image can be tiled horizontally though?

I got your point. I've already decreased quality. I cannot decrease more.

Repeating the image is not a choice, since this image should cover the whole screen.
centering image is not a bad idea, but it will not look great though.
And centering will only cover higher resolution. what about lower resolution? website will be just cut-off.
Im still trying to get how to make diagonal divs. so lame!

Any more options for me?

Thanks guys!

06-24-2010, 01:25 PM
You could try something like this (http://css-tricks.com/how-to-resizeable-background-image/).

Major Payne
06-25-2010, 08:12 AM
Hey, all you need is a 1X1 pixel black image and let it repeat. Can't get a faster load for an image that size:

For a tiled image, change to:

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

The alternatibe is to use an image slice and repeat it although a 1 pixel image is a slice. :P

06-25-2010, 06:58 PM
how about http://www.cssplay.co.uk/layouts/background.html

i interpret this as you want to use that image as the "entire" background for the page. (think like the newish google background images)

Major Payne
08-09-2010, 06:56 PM
how about http://www.cssplay.co.uk/layouts/background.html

i interpret this as you want to use that image as the "entire" background for the page. (think like the newish google background images)OP's image is large enough, but Stu always has elegant solutions.

Several other sites with same/similar code:

Background to Fit Screen:

http://paynelessdesigns.pastebin.com/f760990b | http://paynelessdesigns.pastebin.com/VUSbessd

08-09-2010, 09:43 PM
24kb isn't terrible for file size. I do think it could look good if you size it to the browser.