HELP!!!! Visual Studio won't display Website Background-Image correctly (Adds margin)

[cedriccjmusic]

HELP!!! For my Advanced Web Design course, I decided to design a website. We HAVE TO USE Visual Studio for the project. I'm using Visual Studio 2010. It's going well, minus the fact that Visual Studio won't correctly display my background image! I created a 1600x1680 background image. I set the background-image in a seperate CSS file. However, Visual Studio appends a margin to the right of the background-image.

What I'm trying to achieve: I want my 1600x1680 background-image to fill the entire page without stretching (it's 1600x1680!!!...it doesn't need to be stretched!)

I've googled fixes to have a background-image to fill the screen. However, all of the fixes, like the one below, stretch the background image causing other images placed on the page to display in incorrect positions:

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

To make sure this is a Visual Studio problem, I imported the exact same website to Dreamweaver. It renders the background perfectly (no margin to the right of the background-image):


Here's my CSS code that sets the background image for the website:


Here's what Visual Studio renders (look at the margin it inserts to the right of the background image.)



PLEASE HELP ME! I don't want to turn in a project with background image that either has been stretched to fill the page, or has a randomly-appended margin like shown above.

MULTIPLE FIXES WOULD BE APPRECIATED. I hope my description was clear.

Thanks in advance!

 

[IanRyder]

Hi,

This does not really make sense. I have just tried this with your CSS and so long as the width of your picture is the same width as your screen resolution then it will display as a full screen image with no margin.

You specify here that you have created an image of 1600 x 1680 which I am assuming is supposed to be matching your screen resolution, therefore no stretching etc? The thing is, I do not know of any screen dimension where the width is less that the height? Have you got this mixed up? Should the picture not be 1680 (wide) x 1600 (high)?

Hope that helps.

Cheers,

Ian

 

[cedriccjmusic]

IanRyder...Thanks for your response. My Lenovo ThinkPad W530 yields a screen resolution of 1600(wide) x 900(high). The background-image design is literally 1680px long, thus making it longer than the width. That should be no problem though.

The screenshot from Dreamweaver and my CSS page proves that Visual Studio is in fact the problem! When I open my website with Dreamweaver, it works just fine, allowing the background image to fill the screen without scaling/stretching. When I open the same website within Visual Studio (same code), I get the margin issue, that BY THE WAY does not show up in the code!!!

It's so annoying and I can't find a fix to get rid of this annoying margin problem! If anyone has encountered this problem, or knows of a fix, please feel free to share!!!!