Background problem

I have something strange going on with my background. The background is a different size than what the page size is on my computer. Can I make this fit the page correctly by just changing the size of it, or does something more intricate need to be done?

Hi Shakmbakm, please post your code and we’ll be able to help you out.

You can set a background-size property to change the size of a background image, but that won’t work in IE8 and below.
Most people don’t resize background images like this.

background-size also support a ‘cover’ value which normally does what you want with a large background image you want to cover an area in the best way it can.

the image is default on the top left of the screen. When I center it is when it becomes taller than the screen. here is the code I have for the background

body {
	margin: 0; padding: 0;
	font: 10px normal Arial, Helvetica, sans-serif;
	background: #FFFFFF url(../images/index.png) no-repeat;
        width: 100%;
        display: table;
}

It’s not really clear what you are saying here. But apart from the CSS3 options, you could also go down the JS route:

http://buildinternet.com/project/supersized/3/core.html
http://srobbin.com/jquery-plugins/backstretch/

the image is centered but the menu is above the the top of the page.

We need to see it to have any hope of understanding what’s going on.

ok i’ll upload a screenshot that you can look at soon.

here is a sample screenshot of what I mean.

here is the my code

body {
	margin: 0; padding: 0;
	font: 10px normal Arial, Helvetica, sans-serif;
	background: #FFFFFF url(../images/index.png) no-repeat center;
        width: 100%;
        display: table;
}

#wrapup {
    margin: 0 auto;
    width:1100px;
}

.container {
	width: 1100px;
	padding-top: 25px;
        padding-left: 5px;
	margin: 30 auto;
	position: reletive;
}

If this is a cut-n-paste from the actual code, please note that in {position: reletive;} “relative” is misspelled. Screenshot is pending approval.

thank you for pointing that out! I fixed that, it had no effect on my problem though.

Pardon me for not noticing earlier.

.container {margin: 30 auto;} is missing a unit of measure.

Without a link to the page, the best we can do is speculate, which can become tiresome. We need to be able to relate the css to the html to determine what is happening.

We need to see your HTML and CSS code, not a screen shot. (Sending us a screen shot is like sending your doctor a photo and asking what’s wrong with you.)

[ot]

Great analogy!!! :rofl:[/ot]

Here’s the page :http://superfunproductions.com/
And the background image mentioned: http://superfunproductions.com/images/index.png
And the css: http://superfunproductions.com/css/superstyle.css

The problem looks like your page is shorter that your background image. I would chop off the top part of the image and make it the background of your navigation then just make the page background to be the colour purple used. That way you’ll get your full header and the page can be any length it needs to be.

I have noticed something new. In IE, safari, and google chrome the page looks good in a small box, when maximized the contents of the page changes but not the background which is when this problem occurs. Should I post both CSS and HTML whole files?

Thanks, RyanKing1809.

Shakmbakm, how do you want the background image to fit in the window? It looks like it is resting against the left edge, to me. Do you want it centered? Do you want it to stretch to the width of a wide monitor? What do you expect the page to look like? What does “looks good” mean?

The way the images on the page are moving the background image would need to stretch

shakmbakm, you’re a person of few words.

This should center the background image:


body {
    background: url("../images/index.png") no-repeat scroll [COLOR="#0000FF"]50%[/COLOR] 0 #FFFFFF;

shakmbakm,

Any idea why the body is set to display:table?

Also, you might want to delete the left padding in .container, or reduce the width by 5px to compensate for it.


.container {
    [COLOR="#FF0000"]padding-left: 5px;[/COLOR]
    padding-top: 25px;
    position: relative;
    width: 1100px;
}

My apologies I don’t try to come off that way. I do not know if there is a reason it is set to table honestly. Someone else who worked on this may have done that. Thanks for your help i’ll try that out.