Я не могу отобразить свой фон из CSS

Question

Я не могу отобразить свой фон из CSS

0

В моей папке были дополнительные файлы, в которых я не удалялся и вызывал у меня конфликты. Любые другие новички, подобные мне, обратите внимание: чистая папка - это путь. Спасибо всем за ваше время, усилия и знания.

Кажется, моя папка грязная, и у меня могут быть конфликты. Я не уверен. Но очистит и посмотрит, что произойдет. Я дам вам знать, как это работает. Спасибо вам за помощь.

Я не занимался веб-дизайном в течение нескольких лет, и меня учили делать мой макет в таблицах (Yikes). Поэтому, если это правильный нубийский вопрос, я извиняюсь, но я действительно не могу понять это. Я не могу получить какой-либо фон для отображения, я изменил способ, которым моя ссылка на ссылку была написана несколько раз, я добавил то же изображение в любой возможный раздел в папке (он все еще находится на моем компьютере). Затем я отменил его и попробовал только задний цвет, который тоже не работает. Я смотрел на этот крошечный код в течение нескольких дней и читал совет, но у меня не хватило сил, чтобы попробовать. Наверное, я сделал что-то не так, но я должен глупо видеть это.

Я использую editplus.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Burn</title>
<link rel="stylesheet" href="/shadow.css" type="text/css"/>

</head>

<body>
<div id="backing">

<!------------------------------beginning of main pages header ------------------->
<div id="header"><img src="makedo.jpg" width="980" height="200px" border="0"/>
</div>
<!------------------------------Navigation bar ------------------------->
<div id="nav">
<p class="title"><img src="images/tabard.jpg" width="60px" height="60px"/><a href="#">Burn<span class="subtitle">-Aszune EU</span></a></p>

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Apply</a></li>
</ul>
</div>

<!------------------------------------main --------------------------------->

 <div id="main">
<h1>Burn Guild</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>

<!-------------------------------------side bar--------------------------------->

<div id="sidebar">
<!-- Start HTML Code --><iframe WIDTH="300" HEIGHT="400" title="Shoutbox" src="http://shoutbox.widget.me/window.html?uid=npla79" frameborder="0" scrolling="auto" ></iframe><script src="/v1.js" type="text/javascript"></script><!-- End HTML Code -->
</div>


</div>
</body>
</html>

Мой CSS

#backing 
{
  background-image: url(../images/fire.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



#nav
 {
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
}

.title
 {
color:#EDEDED;
font-family:verdana;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.subtitle 
{
color:#EDEDED;
font-family:verdana;
font-size:15px;
}

#navigation
{
list-style-type:none;
}
li 
{
display:inline;
padding:10px;
}
#nav a
{
font-family:verdana;
text-decoration:none;
color:#EDEDED;
}
#nav a:hover 
{
color:#BDBDBD;
}

Bekki 31 дек. 2013, в 12:10

Источник

0

Вы проверили, правильно ли на ваш CSS ссылаются? Или вы пытались просто добавить 'background-image' в стиль 'body'?
aaroncatlin 31 дек. 2013, в 10:41
0

попробуйте добавить цитаты, может быть? background-image: url ('../ images / fire.jpg') фиксированный центр центра без повтора;
Mazeltov 31 дек. 2013, в 10:43
0

У меня было это в теле & html. Отдельный Div был последним вариантом, о котором я мог подумать.
Bekki 31 дек. 2013, в 10:54
0

o и остальная часть моего CSS работает, только фоновое изображение, и оно на том же листе.
Bekki 31 дек. 2013, в 10:55
0

Обратите внимание, что background-size: cover; + background-attachment: исправлено; делает ошибки Chrome в некоторых случаях и не отображает ваш фон.
enguerranws 31 дек. 2013, в 11:05

Показать ещё 3 комментария

Теги:

html

css

4 ответа

Ещё вопросы

Вы проверили, правильно ли на ваш CSS ссылаются? Или вы пытались просто добавить 'background-image' в стиль 'body'?
попробуйте добавить цитаты, может быть? background-image: url ('../ images / fire.jpg') фиксированный центр центра без повтора;
У меня было это в теле & html. Отдельный Div был последним вариантом, о котором я мог подумать.
o и остальная часть моего CSS работает, только фоновое изображение, и оно на том же листе.
Обратите внимание, что background-size: cover; + background-attachment: исправлено; делает ошибки Chrome в некоторых случаях и не отображает ваш фон.

Sowmya · Answer 1 · 2013-12-31T09-02-00.000Z

Вам нужно либо использовать background-image: с другими свойствами вручную для повтора и положения или background: добавить все значения в него.

В вашем случае, поскольку вы используете фоновое изображение и все значения для него, он не работает, поэтому используйте только background:

#backing 
{
  background: url(../images/fire.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

DEMO

Так было у меня изначально, но у меня это тоже не работает. Однако кто-то связал это с моим кодом, и это работает для них.

joker · Answer 2 · 2013-12-31T09-14-00.000Z

измените класС#backing ниже одного в вашем файле css

#backing 
{
  background-image: url('full path of your folder where file exists/fire.jpg'); 
  background-repeat:no-repeat;
  background-position:center center;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

Все еще не работает. Я даже использовал этот #backing {background-color: # b0c4de; }
Возможно, вы на самом деле к чему-то, кажется, у меня есть грязный след (папка).

Marios Fakiolas · Answer 3 · 2013-12-31T09-32-00.000Z

Для #backing измените фоновое изображение на:

#backing {
    background: some-color some-url some-repeat-option some-position some-attachment-option;
}

и это нормально, см. здесь http://jsfiddle.net/Z7KMx/ Как вы можете проверить здесь http://www.w3schools.com/css/css_background.asp background-image в качестве фона-повтора и т.д. является суб-свойством задний план.

background-color: some-color;
background-image: some-url;
background-repeat: some-repeat-option;
background-position: some-position;
background-attachment: some-attachment-option;

Конечно, вы тоже можете сделать это, объявив все под-свойства шаг за шагом, но слишком много боли, я полагаю, что сокращенная версия намного лучше.

background: some-color some-url some-repeat-option some-position some-attachment-option;

Я сделал это также, но это все еще не работает для меня. Я нажал на вашу ссылку, и она отлично работает.

Mthe beseti · Answer 4 · 2013-12-31T09-02-00.000Z

0

Привет для того, чтобы это работало, вы должны удалить background-image добавить использование background только. Вот демо, которое я создал для вас DEMO

Есть много способов решить эту проблему. но я предпочитаю это.

#backing 
{
  background: url('../images/icons.png') !important; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Mthe beseti 31 дек. 2013, в 09:02

0

Все еще не работает. Я даже пытался сделать только цвет фона с помощью моего CSS. Кто-то еще сделал это и связал мне результаты, и это работает для них. Может быть, я должен попробовать его на ноутбуке.
Bekki 31 дек. 2013, в 11:18
0

тогда проблема связана с вашей файловой структурой. пожалуйста, убедитесь, что вы разместили ваши изображения и CSS в правильном каталоге
Mthe beseti 31 дек. 2013, в 11:20
0

Ваш правильный. Кажется, я не удалил некоторые старые файлы с того момента, когда ушел с эмо с первой попытки. Все вычищено и работает намного лучше. Кажется, он хочет покрыть только ту же высоту, что и мой заголовок, но я исправил это с помощью высоты: спасибо за вашу помощь. Если вы знаете о лучшем исправлении, тогда используйте высоту в #backing, пожалуйста, дайте мне знать.
Bekki 31 дек. 2013, в 11:41

Показать ещё 1 комментарий