Picture too big?

[bahl85]

I’m new to all of this, but I am trying to make my image just like the one presented in this tutorial: …perfect-full-page-background-image/ but it seems as though my image is too big. Here is what I am getting: MySite

Just to be complete, here is the image I am trying to make into my background: …/bg.jpg

My style.css file:

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;

}

My index.html file:

RAJIVBAHL.COM

Thanks for any help you may have for me!

[bahl85]

Just changed it to what you said:

copy & paste from my style.css —

html {

background: url(images/bg.jpg) no-repeat center center fixed;

-webkit-background-size: 100% auto;

-moz-background-size: 100% auto;

-ms-background-size: 100% auto;

-o-background-size: 100% auto;

background-size: 100% auto;

}

And didn’t change for me (checked with Chrome and IE) Link to page

[bahl85]

I wanted to make the picture fit in the screen no matter the dimentions of the screen/browser without having scroll bars. Something like the example in the tutorial where the picture has no bars, it fits the screen, and it looks good. My picture is too big it seems but the orignal isn’t that big.

[ArcticPenguin]

Try adding this to remove your scroll bars.

html, body { overflow: none !important; overflow-x: none !important; overflow-y: none !important; }

If you want to remove only one scroll bar you can try something like this :

html{ overflow-x: hidden; }

[bahl85]

Well, the scroll bars aren’t the issue if you go to the site (link above) – it is the picture being too big. The original is getting distorted for some reason. With a picture that is 500px in width has the same result as one that is 2000px in width.

[TheDoc]

The image is always going to expand or contract to fill the screen. Since people can change their window size, some of your image is going to get cropped no matter what.

Cropping is way better than having the image distorted and shaped to fit the window.

[bahl85]

That is what I had to end up doing — cropping the picture. The problem seemed to be in the height of the picture. The width doesn’t seem to do anything. If you blow the picture up size wise, nothing really changes.

All in all, a height issue with this.

Thanks for all the help.

[Author]

Posts