CODEWITHSUNDEEP
htmlcss
X10nD
X10nD

Reputation: 22030

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

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.

Upvotes: 12

Views: 99190

Answers (4)

S.Nirmala Josphine
S.Nirmala Josphine

Reputation: 9

For getting no repeat of background in html use this syntax: CSS(Internal stylesheet) use this code in style tag in head part

background-image:url("some picture url");
background-repeat:no repeat;

-It will provide background image of single view without repeatation.

Upvotes: -2

ama2
ama2

Reputation: 2681

you can use background-repeat:no-repeat;

Upvotes: 2

lucideer
lucideer

Reputation: 3882

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.

Upvotes: 46

sachleen
sachleen

Reputation: 31131

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; }

Upvotes: 3

Related Questions