Dreamweaver Background Image

[mom70]

I am a senior trying to create a website for my family. I use Dreamweaver MX 2004 ( old but very good yet). I am familiar with both html and css.
I would like to include a background image for my site. My monitor is wide screen 1600 px by 1204. I am able to use a complete image for my side on my screen but when I preview it in the browser the margins disappear.

I use the following body tag
body {
background-attachment: fixed;
background-image: url(bg6.jpg);
background-repeat: no-repeat;
background-position: center;
}

I was wondering if someone would be kind enough to assist me.

Thanks
Mom70

[mom70]

thanks muthu2010: I tried but I still loose the top and bottom margins of my background image but only when I preview it in the browser.
Should my Image be the exact same size in pixels as my monitor resolutions? Maybe that is where I am making a mistake?
I resized the image to be the same as the monitor. I have a widescreen monitor.

Thanks for taking the time

Mom70

[virtual]

Try reading these.
https://css-tricks.com/perfect-full-page-background-image/
http://www.wickham43.net/backgroundfullwidthflexible.html

and use a simple CSS reset, like this at the top of your css file

* {

margin: 0;

padding: 0;

}

It is difficult to help without seeing your problem on a live site.

[mom70]

Thanks Virtual” apparently nothing seems to work. I realize that you do not have the actual site (neither do I yet)
My background Image does fit well on my page. The only problem is when I preview it in IE8 the top and bottom margins of my image do not show.
Should images be the same resolutions as the monitor? I resized mine to the size of my monitor which 1600X1024 -72 res
Too big maybe?
Thanks
mom70

Great links! Lot of learning for me!!

[virtual]

Different browsers have different presets and display differently, which is why I suggested you do the CSS reset, which brings all the padding and margins for every conceivable tag to 0. You then obviously have to add them back in as needed.

Images cannot really be the same resolution as your monitor, because you have no idea who has which monitor and what resolution out there. You just have to cater to the vast majority. Very few people now have 800x600px and those who have over 2000px are not going to be looking at your site full screen. They will probably only use half and have another window open next to it. As I can’t see your site I don’t know if your background is just for the content or for the whole body, and how is your content going to display over this image?

You would be able to get more constructive help if you posted your site online, either to a folder within another site if you have one, or directly to the domain name you plan on using for this site in a test folder.

[mom70]

Hi Virtual; thanks again. I uploaded the page on a site. Here is the link:http://www.hernandocomputerclub.org/fallpage.htm

However it will be difficult to determine what I am looking for because the page looks good. (I think) However what is missing is this: when you look at both sides of the page there is a blurred margin which should also appear at the bottom and top of the page (over the solid red)
What I would like is for the solid red area to appear in the middle of a blurred area (margin)
In other words the solid red area appears in the middle.

That is how the page appears in dreamweaver

When I work on my page in dreamweaver the blurred area is equal on left margin, right margin, top and bottom.
Once I go to the browser the top and bottom disappear. I could re do the entire background in Photoshop.

I really, really appreciate any input. Sorry for the confusion but I am not a website designer (but I think you already know that!)

Thanks
Mom70

[virtual]

I’m sorry but I really don’t understand the problem here, the whole image for me is blurry in Firefox on Mac. I can’t really see any defined margins with solid red either?

Do not believe what DW is showing you. The only way to see how a website displays is to test in Firefox, which will tell you the real truth, Chrome and Safari and of course IE, which is where you will probably have to start using either conditional comments or an IE specific stylesheet depending on which versions of IE you wish to support. Don’t test in IE first.

While you may be a perfectionist in what you do, how many of your visitors are actually going to notice whether the top and bottom margins coincide with the left and right. They are mainly going to be interested in the content and the information on your site.

[mom70]

Hello Virtual: thanks for the help. Since this is going to be a family website I am going to follow your advise and go very simple.

I see a perfect image in dreamweaver (four blurry margins and a center red solid) but if it does not transfer well on a website I cannot see the sense of going crazy.
I was just very curios as to why I could not make it work.
I appreciate your efforts in trying to guide me

mom70

[Author]

Posts