background-image:no-repeat not working, syntax is correct

Question

Below is the syntax I am using for the background Image. For some reason it is repeating on Y. I cannot use overflow:hidden;

<style>
body {
    background-image: url('<?php echo $ActualPath; ?>images/backgroundimage.jpg'); 
    background-image: no-repeat;
}    
</style>

I want the background-image no-repeat on x and y.

Answer 1

The syntax you should use is

background-image: url(path/images/backgroundimage.jpg);
background-repeat: no-repeat;

.. or alternatively

background: url(path/images/backgroundimage.jpg) no-repeat;

if you prefer the short-hand syntax.

background-image always just defines an image file, so in your example, the second background-image rule is attempting to override the first one, but since "no-repeat" isn't a valid image file the browser just ignores it.

The various background properties are listed here for reference.

Answer 2

The background property has a few properties you can change.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

You can set each one individually, like what you're trying to do. If you set the same one twice, only the last one will take effect.

You're setting background-image twice where the second one should be background-repeat.

There is also a shorthand notation where you do something like

background:#ffffff url('img_tree.png') no-repeat right top;

to set multiple properties in one line. You could use that to change your code to

body{ background: url('<?php echo $ActualPath; ?>images/backgroundimage.jpg') no-repeat; }