Arhn - архитектура программирования

css background-image не работает должным образом

я использую именно этот код:

body
{
background-image:url('gradient2.png');
}

нашел в школе w3, это просто, я получил картинку в той же папке, я сделал все, и я не знаю, почему я не могу вставлять изображения в css. HTML-тег работает. У меня была такая же проблема 3-4 месяца назад, и теперь я снова работаю с html и все еще не работаю. Картинка просто не показывает.

это мой полный css:

*
{
    margin: 0;
    padding: 0; 
}

body
{
        background: url("pagebg2.jpg") repeat left top;    
    font: normal 10pt Arial,Helvetica,sans-serif;

}

#center{
    box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 1);
    border: 3px solid rgba(0, 0, 0,0.8);
    background-color:#50649d;
    border-radius: 20px 20px;
    width: 650px;
    height:900px;
    margin: 0 auto;

}
#pic {
     text-align:center;
}
img {
    box-shadow: 1px 1px 11px 1px rgba(0, 0, 0, 1);
    border: 3px solid rgba(0, 0, 0,0.8);
    border-radius: 20px 20px;
}

а это html:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="CSS/btstyle.css">
        <title></title>
    </head>
    <body>
        <header>this is the title</header>
        <div id="container">
                <div id="pic" class="column">
                <img src="opel.png" />


                </div>


                <div id="center" class="column">

                  center
                </div>
        </div>
        <footer class="foot"><p>©WebMaster [email protected]</p></footer>
    </body>
</html>

  • Можете ли вы опубликовать пример на jsFiddle? Что он делает? Что произойдет, если вы используете отладчик браузера для проверки стиля фона? 15.12.2012
  • jsfiddle.net/hjsTX/3 это должно работать, я получил изображение в корневой папке, и страницы я просто белый. 15.12.2012

Ответы:


1

Ваш код идеален. Я тестировал его на jsFiddle. Проблема связана с URL вашего изображения

Проверьте это: ссылка jsFiddle

body
{
    background: url("http://jsfiddle.net/img/logo.png") repeat left top;    
    font: normal 10pt Arial,Helvetica,sans-serif;

}

Здесь я только меняю URL-адрес изображения.

15.12.2012

2

Я бы прокомментировал @MohitPandey, но мне нужно 50 репутации, поэтому я добавлю это сюда. Когда вы предоставляете прямые URL-адреса, всегда лучше удалить «http», иначе будут предупреждения безопасности, когда вы отображаете контент на защищенной странице. Поэтому измените его следующим образом.

body
{
    background: url("//jsfiddle.net/img/logo.png") repeat left top;    
    font: normal 10pt Arial,Helvetica,sans-serif;
}

Я узнал об этом из HTML5Boilerplate. Надеюсь, поможет!

01.01.2014

3

Ошибка в СТИЛИНГЕ твоего тела...

.Body
{
  background-image: url('pagebg2.jpg');
  background-repeat: repeat;
  background-position: left top;
  font-family: Arial;
  font-size: 10pt;
}

Попробуйте выше...

15.12.2012
  • <body> это не класс, это элемент body{} 15.12.2012
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..