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/index?qid=20100611070259AAeVxIa

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

[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

[Beverleyh]

The way you'd do that is using this CSS;
html {
background:#80B4CC url('path/to/img.jpg') 50% 0% repeat-y;
}but substitute the hexidecimal colour value of your darkest grey instead of #80B4CC


Is their a way to set this using HTML instead of CSS.Sorry, no - you need to use both. CSS needs to target an element in HTML, in this case the 'html' part references the entire web page document.


The gray has a gradient so changing the background color shows.I'm not sure exactly what you mean. You could be referring to a transparency gradient or a flat colour gradient...

Transparency gradient? - The tile is a jpg which means that it offers no alpha-transparency. Neither would a gif or png-8. The only web image format that would support alpha-transparency, and therefor result in a gradient where the background could potentially show through, is a png-24. You uploaded a jpg tile though so this wouldn't cause a see-through effect.

Colour gradient? - You're probably not using an exactly colour match in the background and on the edge of the tile. Make sure you have sampled the outermost dark grey of your tile and substituted it into the CSS hexidecimal colour value referenced above, then that will give a seamless result like the Yahoo page.

Another possible cause for a colour mismatch could be due to the speckled artefacts that are sometimes evident in jpgs. Try converting to a png-8 or gif format where any colour loss in the gradient should be more uniform and predictable.

If you need any more help, please post a link to your page.

[letom]

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

@defender
If you are looking to add that background image on your webpage ..
Please run the following code in your browser and study it..Also please note to change the location of background image as your location.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<style>
body{
background-image:url(bg.jpg); background-repeat:repeat-y; margin:0px auto; background-position:center; background-color: #616161
}
.top{ background-color:#999999; width:590px; height:800px; margin:0px auto}
</style>


</head>

<body>


<div class="top"></div>


</body>
</html>

[jscheuer1]

It's possible that the image you put in your post got changed. The forum sometimes makes images smaller. The one in your post is 620px wide. Applying that to the HTML element, adding a color to extend the image to the edges of the page, and using a transparent body (all like in the Yahoo example) and then adding a container div for the content of the page (probably like the Yahoo example). You would have this:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background Demo</title>
<style>
html {
background-image: url(bg.jpg);
background-repeat: repeat-y;
background-position: center;
background-color: #626262;
}
body {
background: transparent;
}
.content {
width: 570px;
margin: 0 auto;
}
p {
text-indent: 1em;
}
</style>
</head>
<body>
<div class="content">
Your Page's Content goes here.
<p>A shimmering philosopher promiscuously sounds out your blazing porpoises. Her ungrudging goblins laconically repair their puny locusts. Our whimpering pessimists roomily bemoan their shaking kangaroos. Her fumbling sparrows fruitfully mix up the cruel women. That enthusiastic pygmy addictively arrives at their hushed dear. Her high soliloquies fastidiously advise those substantial kings. Their disheartening toads ineffectually divide that refreshing defect. A contrasting penguin prominently loves your forgiving worshipers. His celibate kittens humorously heal her disbelieving dolphins. Her unrelenting players hoarsely exorcise her introductory storks.</p>
</div>
</body>
</html>

[letom]

The minimum width needed for the main layer is 970px; 570 and 590 both are incorrect.