Background image help dreamweaver CS5

[Defender90]

Hi,

Beginner here and was wondering how to center a background image like this page in dreamweaver.

http://answers.yahoo.com/question/in...1070259AAeVxIa

I take the image off this page and try to add it to my page in dream weaver using the HTML and CSS page properties and both ways it doesn't center it. It is cut off and to the left margin.

Sorry for such a simple question

Thanks

[jscheuer1]

Technically you cannot use their image and css without their permission. But if it's just for an experiment, or will have no real impact on Yahoo's interests, you can.

This is what they're doing in their stylesheet:

html{background:#7FB3CC url(http://l.yimg.com/sc/28201/answers2/images/a/i/us/sch/gr4/wide-site-bg.png) repeat-y 50% 0;}

Oh, and the body's background is set to transparent.

[Beverleyh]

I dont use Dreamweaver but if you go into code view you should be able to edit the CSS directly and center a background image withthis CSS;

html {
background:url('path/to/img.jpg') 50% 50% no-repeat;
}

The html selector puts the image as part of the base web page background, but you can substitute in other selectors. For example, you could center the image in the background of a specific div using;

#mydiv {
background:url('path/to/img.jpg') 50% 50% no-repeat;
}

The div markup would be <div id="mydiv"></div>

[Defender90]

Thanks....
I wouldn't use the image. Just curious how it is done to apply something similar.

Thanks to both of you for the advice. I will give it a try.

[Defender90]

I got the image centered but the blue part of the image isn't going all the out to the edges right and left.

Here is the css

<style type="text/css">
body {
background-image: url(backjr5.gif);
background-repeat: repeat-y 100% 0; ;
background-position: center center;
background-attachment: fixed;
}
</style>

any ideas?
Thanks

[Beverleyh]

I'm not really sure what you're trying to do - at the moment we have no idea what backjr5.gif (a small square tile? a long thin tile? a 'full size' image?) so it's very hard to visualise.

The CSS you've posted will cause the image to completely cover and tile the entire screen. What exactly is "the blue part of the image" that you want to extend left and right? You can't manipulate individual portions of an image (only the whole image you're applying the CSS to) so it sounds like "the blue part" would need to be a second image to make that go left-to-right, with the other image in the middle staying centered and un-repeated?

If you're trying to tile an image left to right, while still keeping it in the middle of the screen vertically, you would use

html {
background:url('path/to/img.jpg') 100% 50% repeat-x;
}

But, to save us from confusion, please provide a link to your page, or at least attach the image(s) along with a mock-up image of the effect you're trying to achieve.

[Defender90]

I'm not really sure what you're trying to do - at the moment we have no idea what backjr5.gif (a small square tile? a long thin tile? a 'full size' image?) so it's very hard to visualise.

The CSS you've posted will cause the image to completely cover and tile the entire screen. What exactly is "the blue part of the image" that you want to extend left and right? You can't manipulate individual portions of an image (only the whole image you're applying the CSS to) so it sounds like "the blue part" would need to be a second image to make that go left-to-right, with the other image in the middle staying centered and un-repeated?

If you're trying to tile an image left to right, while still keeping it in the middle of the screen vertically, you would use

html {
background:url('path/to/img.jpg') 100% 50% repeat-x;
}

But, to save us from confusion, please provide a link to your page, or at least attach the image(s) along with a mock-up image of the effect you're trying to achieve.

Sorry about that!
I grabbed the background image from the yahoo page to start experimenting. Don't have anything live.
Here is the image taken from the yahoo page.

[Defender90]

I think the image isn't wide enough. That must be it right? Just realized it. Sorry for the dumb Q.

That didn't change anything actually. If you look at the yahoo page with the white center and the blue going out to the edges that is what I'm trying to do.

[Beverleyh]

Oh, I'm following now.

So the tile needs to go from top to bottom, with a totally blue background.

html {
background:#80B4CC url('path/to/img.jpg') 50% 0% repeat-y;
}

So the hexidecimal colour value (#80B4CC) is just a colour slapped across the whole of the background - that makes things much easier as you don't need another image.

"50% 0%" positions the image in the middle at the top (50% 50% would work for this kind of image too, but the tile would start in the middle and repeat outwards - 50% 0% repeats the tile from top to bottom).

"repeat-y" tiles the image on the y axis (vertically).

Also, note that Ive used the html selector as that will allow the image to tile the whole document. If you just use the body selector, the image will only tile that area of the page that initally loads on the screen - scroll down and the image stops dead. I expect you already descovered that though and use "background-attachment: fixed;" to try to resolve it

[Defender90]

Still can't seem to get this to work in dreamweaver. Is their a way to set this using HTML instead of CSS. Here is an image I made that I would like to have the gray extend out to the edges of the page both horizontal and vertical. The gray has a gradient so changing the background color shows. The attached yahoo page is the effect I'm going for. I'm not sure what I'm going wrong.

Thanks