CSS Background images and sizing...or should I use an image?

[torndownunit]

I know this is a common question, but I am curious what the best method to make a background image 'stretch' to %100 is.

There are a lot of tutorials for a lot of methods online. A lot of them are pretty out of date though, and I find people's advice on this forum way more helpful and useful.

Now the second question. The image I am using is very basic. It's just a black and grey strip running vertically. It makes one half of the page black, and one half of the page grey. Instead of am image, is this effect something I should maybe just do with Divs?

Thanks a lot.

 

[memco]

Whether background or foreground, you have basically two options make an image and give it a relative width (% or em); or you can make a really big image and hide the part that's bigger than the container (overflow:hidden).

I'm not quite sure I'm envisioning your image, but it might be possible to create the effect without an image using a black background on the body and a gray one on the div or using a border. Note that with these techniques you may need to play with positioning, width or height in order to get the colors to match up the way you want.

 

[lucidmedia]

I know this is a common question, but I am curious what the best method to make a background image 'stretch' to %100 is.

There are a lot of tutorials for a lot of methods online. A lot of them are pretty out of date though, and I find people's advice on this forum way more helpful and useful.

Now the second question. The image I am using is very basic. It's just a black and grey strip running vertically. It makes one half of the page black, and one half of the page grey. Instead of am image, is this effect something I should maybe just do with Divs?

Thanks a lot.

I would use a single-pixel background image, repeated in either the X or y direction. Perhaps both.

{
background-image: url(smallPic.jpg);
background-repeat: repeat-x;
}

If you do this effect with DIVs, you then need to think about issues of z-order. Not terribly hard to do, but for something as simple as a background color, a small repeated gif is a lot simpler.

 

[torndownunit]

Ok, I was able to accomplish some of what I want.

But now I am running into a problem where I can't centre the content div on top of the 'background'.

Here is an example:

http://www.ic-designs.ca/csstest/

here is my code, but it cuts and pastes sort of messy out of my application.

Thanks for any help.

#grey { background-color: #999; height: 100%; width: 50%; left: 0; top: 0; position: absolute; visibility: visible; border-right: 4px solid #ccc; }

#black { background-color: #000; height: 100%; width: 50%; left: 50%; top: 0; position: absolute; visibility: visible; border-left: 4px solid #ccc; }

#wrapper { background-color: #333; height: auto; width: 770px; top: 10px; position: relative; z-index: 1; visibility: visible; margin: auto; padding: 15px; border: solid 4px #ccc; }

 

[angelwatt]

I'm assuming you want the wrapper div to be centered. If you move that div outside the div it's in it will center properly. It's currently not centering because it's parent is only occupying the left 50% of the page, so it' attempting to center inside of that.

 

[torndownunit]

I'm assuming you want the wrapper div to be centered. If you move that div outside the div it's in it will center properly. It's currently not centering because it's parent is only occupying the left 50% of the page, so it' attempting to center inside of that.

Ya that is what I am going for. I will give that a shot, thanks.

As I learn CSS stuff, I can figure out individual things I need to do. Like either the background or centering the wrapper. Combining all those things is what gives me issues though.

 

[a cat *miaow*]

I would use a single-pixel background image, repeated in either the X or y direction. Perhaps both.

{
background-image: url(smallPic.jpg);
background-repeat: repeat-x;
}

If you do this effect with DIVs, you then need to think about issues of z-order. Not terribly hard to do, but for something as simple as a background color, a small repeated gif is a lot simpler.

That's the best option. You're working with the background it should just be an image attached to it _ there' no point having an additional 2 divs just to get that effect.
You're over-complicating something that would have taken you 2 minutes to do the easy (and I would say correct) way.

 

[torndownunit]

I don't understand how to create a background like in the link using that method though. I don't know how to split the page like in the link. How is using a single pixel image repeating going to do that? And how will it stretch when people increase the size of the browser window and keep a centre line like that?

I have no problem doing something the 'right way' but it hasn't been explained how to replicate my example in the link using the method.

Thanks.

 

[angelwatt]

I don't understand how to create a background like in the link using that method though. I don't know how to split the page like in the link. How is using a single pixel image repeating going to do that? And how will it stretch when people increase the size of the browser window and keep a centre line like that?

I was confused on how those people thought a 1 pixel image was going to accomplish what you wanted. I don't think they understood what you were going for.

Were you able to do anything with my suggestion? If not, let me know because it seemed to do what you needed.

 

[torndownunit]

Ya I was confused. I don't really see anything wrong or overly complicated with the method in the link when it comes to producing that effect.

I just haven't had a chance to try your suggestion yet. It's a personal site of mine, so I plan on working on it this weekend. I've been too busy with other jobs during the week to get to it.

Thanks!

 

[torndownunit]

angelwatt,

that worked. Thanks!