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;
}
Изображение должно появиться. Проверьте путь к изображению, проблема должна появиться там. –
Я не думаю, что изображение появится, если ширина или высота не определены. Попытка дать тело шириной и высотой 100%. – chdltest
проверить путь изображения, он отлично подходит для меня [скрипка] (http://jsfiddle.net/beav2q8t/) попробуйте изменить свой путь на '../' '/' –