简体   繁体   English

背景图像:无重复不起作用,语法正确

[英]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 . 由于某种原因,它在Y上重复。 I cannot use overflow:hidden; 我不能使用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. 我希望背景图像在x和y上不重复。

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. background-image总是只定义一个图像文件,因此在您的示例中,第二个background-image规则试图覆盖第一个,但是由于“ no-repeat”不是有效的图像文件,因此浏览器只会忽略它。

The various background properties are listed here for reference. 此处列出各种背景属性以供参考。

The background property has a few properties you can change. background属性具有一些可以更改的属性。

  • 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 . 您要设置background-image两次,第二个应该是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; }

您可以使用background-repeat:no-repeat;

For getting no repeat of background in html use this syntax: CSS(Internal stylesheet) use this code in style tag in head part 为了使html中的背景不再重复,请使用以下语法:CSS(内部样式表)在头部的样式标签中使用此代码

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

-It will provide background image of single view without repeatation. -它将提供单一视图的背景图像,无需重复。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM