Background image of wood with different different texture horizontally and vertically

HTML & CSS
1

I’m curious to find out how i can code this in css?

If i have a background image of wood and the wood texture changes across the page both horizontally and vertically.

i can’t exactly have a single image (like a single horizontal line repeat). or a single vertical line repeat. If i take the line on the outside, it won’t look like the vertical image or horizontal image inside.

http://pabloalvin.deviantart.com/art/Wood-Texture-91469799
such as this image for example, do you think it’s possible to use this as a background image and how would i go about coding it or separating into multiple background images.

2

Use the background-image CSS property and the [URL=“http://reference.sitepoint.com/css/background-repeat”]background-repeat CSS property.

For example:


div {
     width:500px;
     height:500px
     background-image:URL('path-to-your-image/yourimage.jpg');
     background-repeat: repeat-x repeat-y;
}
3

Hi Force flow, thanks for the reply. But my question is a bit different.

i’m trying to ensure that the page loads quickly. do you think breaking the background image into multiple images and coding multiple background in css would be faster loading for the website or one big image as a background just using it to cover the whole screen?

Does anybody use svg for backgrounds out of curiosity cause i believe that would scale better instead of a raster image?

let me know, thanks.

4

It’s not really clear what you are saying there, but I guess your issue is that the image doesn’t tile nicely (that is, repeat across the page seamlessly). There are plenty of wood images that do tile, so that would be the best option. Linking to multiple images in not a good idea, but I don’t know what that would achieve anyway.

There are new CSS properties that tell a single background image to cover the whole background area, but you need a fairly big image for that to look decent, so I’d still recommend a wood image that is suited for tiling.

5

This is the same piece of wood arranged so it tiles:

6

Thanks for all the advice so far but What i actually have is a psd file given to me by an artist and what they designed is something that looks like aged paper on top of a certain wooden texture background that i was told the client must have. The problem with this wood background is it’s not a tileable image. It’s different from left to right and top to bottom. It doesn’t tile well. That’s why i was thinking of multiple background images. we need to make this compatible in old browsers as well.

So i have a wood panel background and an image of something that resembles a sheet of aged yellowed paper in the middle of the site which contains a logo on the top of the page. (picture a yellow paper that’s 8x11 for example)

Within that yellow paper, we see about 4 different buttons, that will have an arrow show up next to each text label link. the font she used for the text on the link, i’m not too sure.

On the bottom left, you’ll see like a square that actually displays like a special deal.

Then on the very bottom, you’ll see an address, phone number and email.

i tried uploading this file, but it failed to upload.

What i would like to know is what design recommendations i should give to them.

especially if they don’t want to change the background image? and i am the use the whole background image of wood, wouldn’t it be too big and take a long time to load the website.

i know css has some feature that allows a background img to cover the whole screen. but what should the max image size be and what recommended dimensions should the image have?

let me know, thanks.

7

The image that I posted (your image) will tile (repeat) across a big screen. It sounds like you are not interested in that particular wood image, though.

Do you know how to work with PhotoShop or Windows Viewer? If so, how much larger than 100% can you enlarge an image before it starts to look unpleasantly fuzzy? Exactly those same perceptions pertain to images enlarged with CSS. Images can be scaled down easily, but scaling them larger than their natural size introduces fuzziness. The amount of fuzziness that can be tolerated depends on the image and the person viewing that image. As you noted, larger images require more bandwidth. It’s a judgement call.

The dimensions of the image depend on whether it must be rendered with its native aspect ratio or not. If a strict aspect ratio must be respected, then the image should be large enough to look acceptable on the largest screen used by the target audience. Again, it’s a judgement call that only you can make.

What is the acceptable level of fuzziness?

As Ralph recommended, one smaller, repeating image would be more economical bytewise and CPU-wise across all UAs than one large image that resizes to fit the screen. The smaller repeatable image would be my choice.

8

i have some photoshop knowledge and just pulled up the info about scaling it larger using bicubic smoother.

i was planning on designing it for 1024 px wide layout as per usual.

Not sure how that would look on gigantic 27 inch monitors.

As for that aspect ratio part, i can’t really tell since i’m not familiar with aspect ratios. what i googled so far tells me that a 4:3 aspect ratio indicates the 4 is the width and the 3 is the height. so i’m guessing you’re saying whether the image must be rendered using its original proportions.

I’m not sure what you mean by strict aspect ratio though ?

you mentioned across all UA’s? what does UA’s mean?

yeah, i’m going to try to see if i can scale down their huge pattern and see how it looks repeated on x and y.

9

Pixels and inches don’t exactly equate. Inches are a fixed unit of linear measure. Pixels vary in size. There may be anywhere from 52 to 180 pixels per inch (or more), so it’s inexact to equate pixels to monitor size in inches without knowing the pixel density. I usually estimate around 2000px as a widescreen monitor, but am aware that higher end graphics monitors can exceed 3000px width. With high pixel densities comes a need for scaling images up so they don’t shrink with the pixels. Graphics cards and software manages that for us so the screen can actually render an image that is approximately the same size in inches on monitors with different pixel densities.

Aspect ratio indeed refers to the fraction representing the image’s native width and height. width:height. I used the word “strict” to differentiate between adhering to the native aspect ratio and not doing so (stretching the width or height).

UA stands for User Agent which encompasses the gamut of browsers being used as well as other web rendering devices including screen readers, etc.

You can post your client’s image, if you wish. I enjoy tinkering.

Cheers

10

What i actually have is a psd file given to me by an artist

I have sympathy with you as I receive quite a few non viable PSDs and the first thing I tell the designer is that a monitor is not a canvas and designs should be made to suit the medium. Many designers can draw pretty pictures but have no knowledge of how they can possibly work on a web page. I’m not a designer as such but I know instantly what will work and just because someone can draw it doesn’t mean its viable for the web as the designs should be optimised for the medium on which they are to be presented. It sounds like a classic case of “not fit for purpose” as it’s the content that should dictate the design because you can’t squeeze fluid content into fixed width boxes unless the designer understands the problems and allows for the design to be able to scale and repeat where necessary.

However, I often get given PSds that just don’t work and I send them back to the designer and tell them what needs to be done for them to be acceptable on the web - it’s their job after all as they designed it. If you can’t send it back or are too far entrenched to back down now then the options are as already mentioned above in previous posts.

Ron has given you an example of how to make the wood image a repeatable image. It involves copying the original image flipping the design horizontally and attaching to the right side of the original image and then do the same for the vertical by copying and flipping the vertical and attaching to the bottom of the original image. This gives you a repeatable image with a seamless join. The results can be varied as new patterns are created that probably weren’t expected originally but by changing where you split the image and flip it you can minimise this.

Alternatively as Ralph suggest there are plenty of repeatable wood pattern examples around or if you want a non repeating effect then you may find this interesting although not for the faint hearted.

i tried uploading this file, but it failed to upload.

Save the psd as a low quality png and then you should be able to attach it to the post so we can give more specific advice. At least we will be able to say yes or no to certain elements or offer advice in modifying them.

You can usually salvage most designs with some clever planning and modifying the images in some way but sometimes designs are just not viable at all and all the client seems to want is a pretty picture on the page with no thought of what they are doing this. As a web developer it is your job to educate the client and the designer as to what is acceptable so that they get the best of both worlds; a pretty site and a usable one :slight_smile:

11

Thanks for the info. I really want to post that image, but i can’t. the sitepoint forum is not letting me upload it, some kind of javascript error it think maybe cause i’m on safari?

Save the psd as a low quality png and then you should be able to attach it to the post so we can give more specific advice. At least we will be able to say yes or no to certain elements or offer advice in modifying them.

i did actually, it gave me that issue despite being low quality jpg or png.

12

http://webpage.pace.edu/wc43870n/designlab/loquality-1.jpg

Here i managed to upload on this server. it’ll give you an idea of what i’m trying to slice up and code.

I would like some recommendations as the image is huge before made it super low quality jpeg.

13

what type of fluid content would some designer try to fit into a fixed box out of curiosity to get a better idea of what you’re referring to?

Flip design horizontally, is that like 180 degrees?

do the same for the vertical by copying and flipping the vertical and attaching to the bottom of the original image.

not sure what you’re referring to? the vertical?

i’ll check out that article you posted. hopefully it’ll give me some ideas.

any good books for dealing with the design problems that web designers give developers?

14

For future reference, you can upload images by clicking Go Advanced (bottom right) and clicking Manage Attachments.

Yes, that image is an example of why traditional graphic designers don’t belong anywhere near web design. They just don’t get even the most basic aspects of the web—such as the fact that content is changeable and flexible, whether you like it or not. With a fixed background image like that (the paper) you have to try to position text etc. exactly, which you just can’t do. All the user has to do it increase their font sizes (say, but setting their default font size to larger than normal—which isn’t unusual) and the layout is blown out of the water, with text hanging out of fixed height boxes and spilling beyond the background image. For some reason, it’s a very hard message to get through to a graphic designer, though.

If you are stuck with this nonsense layout, the first thing you should do is detach the wood background from the page image. Get the designer to find a similar wood background that can tile. That’s his/her job. Preferably, also get him/her to redo the paper image so that it could at least expand vertically …

15

Basically any fixed width and height element that contains text. You never know what size a user may have set for their text so elements that have to fit into tight space (such as your menu) will eventually flow out of the boundaries because the design is a fixed height and width. You would need to resort to using scrollbars on the content to restrict the overflow which may not look good.

Flip design horizontally, is that like 180 degrees?

No, your paint package should have an option to “flip” horizontally which makes the image run from right to left (and vice versa). The same applies for the vertical and if you the stitch those images together you get a seamless join that can be repeated. It’s awkward with large images like your wood effect because you end up with a large file size unless you crop to smaller sections.

I’ve put up a demo here showing how it can be made to repeat but the images are a higher file size than I would normally use and I would be inclined to shorten the images before slicing.

Your menu is more awkward to repeat although if you were careful you could slice the top and bottom as separate elements and the make a repeating middle section that can stretch with content. Unless of course you want a fixed width and height and then just use the whole image but remember that you will need to make sure content stays inside by controlling the overflow with scrollbars etc.

For modern browsers you could use background-size to scale the image but that would leave older browsers out in the cold.

16

body { background:url(images/wood1.jpg) repeat 0 0; }
#wrapper {
height:100%;
display:table;
width:100%;
background:url(images/wood2.png) repeat 0 0;
}
*+html #wrapper {
min-height:100%;
height:auto

the asterisk and plus sign before html, i’m wondering what that represents actually?

This part of css was really interesting. I really appreciate the actual demo. I’ll look it over and hopefully figure it out.

I find this portion a bit confusing. The display table portion is also kind of strange cause there’s no tables in the code.

17

http://www.elalmacennyc.com/ - the designer referred me to this design saying that this site was able to get a background up and without tiling, but it looks like they just used a background and scaled it up if i remember correctly anyway, i looked at this a couple of days ago.

yes i tried uploading the way you mentioned and that’s what gave me the error i was referring to .

i’m waiting on them to detach the background cause their psd doesn’t have that detached.

how can they redo the paper image so that it can expand vertically?

18

It’s a hack for older browsers.

The display table portion is also kind of strange cause there’s no tables in the code.

display: table is a CSS declaration that tells elements to observe table-like behavior. It’s not a rule for styling actual tables. :slight_smile:

19

It’s not done very well, though. The background image gets distorted, depending on the width and height of the browser window. They’ve used a pretty huge image, too. You can always optimize an image for the web in a program like PhotoShop, so make sure to do that, no matter how you go about this. (Use the Save for Web feature.)

how can they redo the paper image so that it can expand vertically?

Ronpat’s image is an example of what can be done.

20

Ronpat’s image is of a wood background that he flipped horizontal right?

i’m talking about how can we change the paper image so that it can expand vertically?