2014-11-25 5 views
-1

Я пытаюсь добавить изображение «logo.png» на фон моей страницы в верхнем правом положении. Я использую CSS, чтобы сделать это, и больше ничего ... вот что у меня есть:Добавление логотипа в начало страницы с фона

body { 
    background-image: url('logo.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: right top; 
    background-color: #E6E6E6; 
    font-family: Arial; 
    font-size: medium; 
} 

Я не уверен, что я делаю неправильно, потому что изображение не появляется

+0

Изображение должно появиться. Проверьте путь к изображению, проблема должна появиться там. –

+0

Я не думаю, что изображение появится, если ширина или высота не определены. Попытка дать тело шириной и высотой 100%. – chdltest

+0

проверить путь изображения, он отлично подходит для меня [скрипка] (http://jsfiddle.net/beav2q8t/) попробуйте изменить свой путь на '../' '/' –

ответ

0

Проверьте путь к файлу, на котором находится логотип.png. Он находится на том же уровне, что и ваша веб-страница?

вот скрипка http://jsfiddle.net/z7d8kcLz/, которая работает. Я действительно не вижу никаких проблем с кодом

только изменения в коде ссылка на фиктивный логотипу

body { 
    background-image: url('http://www.hessionphysicaltherapy.ie/wp-content/uploads/2010/11/dummy-logo1.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: right top; 
    background-color: #E6E6E6; 
    font-family: Arial; 
    font-size: medium; 
} 
+0

вы правы .. у меня неправильный URL. Мне просто нужно выяснить, как я ошибаюсь. Но спасибо! –

0

Сделать отдельный DIV для логотипа, затем экспериментируйте. Технически вы должны понять это путем проб и ошибок. Загрузите свою страницу в google chrom, щелкните правой кнопкой мыши> элемент проверки, и у вас будет консольная панель, где будет код srouce. С левой стороны найдите div, который вы используете, и добавьте к нему различные элементы.

0

Попробуйте это:

Поместите свой логотип внутри DIV и поставить его прямо перед закрывающим тегом тела.

.logo-div { 
Width: 150px; /* Adjust as needed */ 
height: 150px; /* Adjust as needed */ 
position: fixed; 
right: 0; /* Adjust as needed */ 
top: 0; /* Adjust as needed */ 
z-index: 1; /* Adjust as needed */ 
} 
0

Evan, с помощью CSS вам нужно создать строительные блоки. Во многом так, как вы бы нарисовали на листе бумаги, вам нужно указать CSS, где нужно разместить элементы. Звучит просто, но учитывая это, если 3D и ваши не видят 3D, это делает CSS болезненным. Поэтому это был я, я бы поклевал элементы в разных тегах html и т. Д.

HTML 
<body> 
<div class="brand-group"> 
    // use div tag for CSS background img insertions 
    <div class="brand-logo"></div> 
</div> 
// etc 

CSS 
body{ 
// width and height are important in the parent element. Without it CSS will just collapse 
// going back to blank sheet of paper analogy. If you don't tell CSS the dimensions of the paper 
// it will assume zero and start to build the document dimensions based on the elements you create 
    width: 1000px; // or use 100% or 
    min-height: 2000px; 

// ... other body styling 
} 

// I like to use a wrapper as I can then place everything brand related into the wrapper 
// e.g. logo, tagline, etc. I then position the wrapper and following that the elements within the wrapper 
div.brand-group { 
    // I don't like static or fixed as you cannot use float, etc,, but I get why it is done 
    // position attribute is essential as you telling CSS who you want to position the logo relative to its parent 
    // in this case it is body (1000 x 2000) 
    postion: relative; 
    float: right; 
    // alternatively IF you use fixed or static then use this approach 
    // left: 100% 
    // left-margin: -215px; // adding 15px right gutter 
    // you can do something similiar using top if you want to push to top, but lets assume this is your first html element 
    width: 200px; 
    height: 100px; //you are not building the group size 
    top: margin: 15px; 
} 
div.brand-logo { 
    // easier to position logos using LESS or SASS as you have functions 
    // in pure CSS the easiest way to center the logo would be to look at the image dimensions' 
    // lets say it is 100px x 50px 
    left: 50%; 
    margin-left: -50px; // half the width of the image 
    top: 50%; 
    margin-top: - 25px; // half height 
    background-image: url('logo.png'); 
    background-repeat: no-repeat; 
    background-color: #E6E6E6; 
    font-family: Arial; 
    font-size: medium; 
} 
Смежные вопросы