ansaurus

Question

Answer 1

+4 A:

Try

background-position: center center;

Pekka 2010-04-15 07:04:16

How come the double center center work?Anyway it does not solve the issue, still the same

Jean 2010-04-15 07:14:13

@Jean: look at the specs, background-position actually can actually take 2 values (horizontal and vertical). http://www.w3.org/TR/CSS2/colors.html#propdef-background-position

Rob van Groenewoud 2010-04-15 07:18:57

@rob its not working, the image is tiling. The image is a 1600x1200 and my screen size is 1280x800

Jean 2010-04-15 07:21:29

`background-image` only takes one argument. You need to specify `background-repeat: no-repeat` as a separate instruction

nikc 2010-04-15 07:25:42

@Jean you can't resize a background image (yet). It's possible in CSS 3 but that isn't supported widely enough yet. `center center` in tandem with `background-repeat: no-repeat` should do what you ask for - center the image.

Pekka 2010-04-15 07:26:13

Guys, please try my code with a 1600x1200 on localhost, you will understand what I am trying to say.

Jean 2010-04-15 07:27:19

@Jean is your problem the re-sizing of the image?

Pekka 2010-04-15 07:41:29

it could be the page content isnt big enough to display the content, add a `min-height` and `height` to the body CSS too to handle this. Lastly, you could use javascript to get the screen height and pick a correct image to display in the background of the body, so you would always see the correct image.

Mauro 2010-04-15 07:43:26

If I remove the syntax background-repeat:no-repeat; background-position: center center;THen the image is displayed from left and tiled

Jean 2010-04-15 08:00:06

@Jean but why would you remove the syntax?

Pekka 2010-04-15 08:02:42

@Jean ahh, I see now from your screen shot. You need to give the `body` a `min-height` of `100%` so it extends across the full screen. That may sort it.

Pekka 2010-04-15 08:04:00

@pekka, it did sort out, but there is another problem now check http://www.jsfiddle.net/yWrQP/4/

Jean 2010-04-15 08:11:48

@Jean can you describe the problem? I don't see it.

Pekka 2010-04-15 08:17:04

@Jean, this is what you asked us to do..

Kyle Sevenoaks 2010-04-15 08:22:25

Answer 2

+1 A:

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

That should work.

If not, why not make a div with the image and use z-index to make it the background? This would be much easier to center than a background image on the body.

Other than that try:

background-position: 0 100px;/*use a pixel value that will center it*/ Or I think you can use 50% if you have set your body min-height to 100%.

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(../images/images2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

Kyle Sevenoaks 2010-04-15 07:27:37

It does centralize, but displays only half the screen, I wish stackoverflow had an option to attach screenshots

Jean 2010-04-15 07:32:22

You could make a screenshot and upload it to your server or a free pic hosting site like photobucket.com, or make a temporary example at www.jsfiddle.net and post a link for us. From what you've said, the image is 1600x1200 and most screen resolutions don't go that high, try resizing your image to fit. I use a widescreen monitor at 1440x900 for example.

Kyle Sevenoaks 2010-04-15 07:34:51

screenshot - http://imagevat.com/picview.php?ig=6179I am not sure how to upload images to jsfiddle, if you can help me out therehttp://www.jsfiddle.net/yWrQP/

Jean 2010-04-15 07:52:02

To add an image to jsfiddle, just use the full http path EX: `background-image:url(http://www.myurl.com/images/image.jpg);` put that in the CSS.

Kyle Sevenoaks 2010-04-15 07:59:57

I dont have the server to do it, but used an imagehosting site, but still check it out now

Jean 2010-04-15 08:03:44

I checked it out, I saw what you're going for, and am actually kinda stumped as to why it doesn't work. I edited my answer, try setting your body min-height.

Kyle Sevenoaks 2010-04-15 08:05:11

I thought it was a browser used, and checked on IE 8, FF, Chrome.

Jean 2010-04-15 08:08:28

Check cross browser compatibility after you have it working in FF, did you set the `min-height`?

Kyle Sevenoaks 2010-04-15 08:09:45

min-height worked, I gave it the height of the image since I know it, probably have to use jquery to do it. Now why is there a 5px space on top. I did top:0px; does not seem to work though, any ideas?check jsfiddle.net/yWrQP

Jean 2010-04-15 08:10:17

Your jsfiddle doesn't do anything, when you click run it should show up your result in the bottom right frame, please amend your fiddle. Here's an example of one I've been messing with http://jsfiddle.net/waFC8/.

Kyle Sevenoaks 2010-04-15 08:16:20

I did add top:0px; does not work for me

Jean 2010-04-15 08:17:33

I edited my answer to include what we think might help.

Kyle Sevenoaks 2010-04-15 08:19:04

Answer 3

+1 A:

There's an error in your code. You're using a mix of full syntax and shorthand notation on the background-image property.This is causing the no-repeat to be ignored, since it's not a valid value for the background-image property.

body{   
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Should become one of the following:

body{
    background:url(../images/images2.jpg) center center no-repeat;
}

or

body
{
    background-image: url(path-to-file/img.jpg);
    background-repeat:no-repeat;
    background-position: center center;
}

EDIT: For your image 'scaling' issue, you might want to look at this question's answer.

Rob van Groenewoud 2010-04-15 07:42:10

'background:url(../images/images2.jpg) center center no-repeat;' does not work, since the syntax is wrongAnd the others do not work either

Jean 2010-04-15 07:58:26

ansaurus

tags:

views:

answers:

Centering background image, using css

related questions