Отделяне на лого от background with CSS

N

nekafludpich123

Registered
Значи понеже логото и background-a са ми на една картинка,искам логото да го изрежа (което го мога сам) и след това картинката от логото да я сложа точно на мястото от където е изрязана.. но не знам как ще стане кода.. някой може ли да помогне?

http://prikachi.com/images/523/2475523W.png

PC игри
 
аз за този метод дето предложи Lasevg не съм много сигурен дали действа

затова ето аз ти ги отделих
http://prikachi.com/images/627/2475627z.jpg
http://prikachi.com/images/628/2475628c.jpg
само с css си намести логото ;)
 
.logo{background:url('http://fan-bg.com/wp-content/themes/eGamer/images/logo.png');position:absolute;left:200px;top:50px;}

като сложа това и нищо не се получава :shock:
 
nekafludpich123 каза:
.logo{background:url('http://fan-bg.com/wp-content/themes/eGamer/images/logo.png');position:absolute;left:200px;top:50px;}

като сложа това и нищо не се получава :shock:
Увеличете...
формата на снимката е jpg ... и прекръсти файла на logo ...

а и добави widht:xxpx; и height:xxpx;
 
Lasevg каза:
човек това ти е само css , ти извикал ли си дива в html кода ?
Увеличете...
той и формата е объркал може и да е извикал ама зарад формата да не се е показало ...

ето как да го извикаш в html

<div class="logo"></div>

а ако искаш логото да е линк
<div class="logo"><a href="./index.php"></a></div>
 
Не ползвай position, а направо задай margin: 10px auto; и ще се намести най-отгоре посредата.

Тези 10px може да си ги промениш, това е колко да се мръдне отгоре.
 
тоест

css
.logo{background:url('http://fan-bg.com/wp-content/themes/eGamer/images/logo.jpg');margin: 10px auto; widht:381px;height:82px;}

(не съм сигурен дали е наясно затова му давам кодовете направо ;) )
 
Tова ми е в CSS
/*------------------------------------------------*/
/*------------------[MAIN LAYOUT]-----------------*/
/*------------------------------------------------*/
.logo{background:url('http://fan-bg.com/wp-content/themes/eGamer/images/logo.jpg');margin: 10px auto; widht:381px;height:82px;}
.headings { color: #000; margin-bottom: 10px; display: block; width: 100%; }
#wrapper { width: 940px; margin: auto; padding: 0px 0px 0px 0px; margin-top: 116px; }
.single-entry { float: left; width: 613px; margin-bottom: 10px; padding: 13px; background-color: #262D2B; background-image: url(images/category-post-bg.gif); background-position: bottom; background-repeat: no-repeat; }
.post-wrapper { background-color: #262D2B; margin-top: 0px; padding: 0px 15px 15px 15px; background-image: url(images/category-post-bg.gif); background-repeat: no-repeat; background-position: bottom; width: 609px; float: left; }
.home-post-wrap { width: 313px; height: 280px; float: left; background-color: #262D2B; background-image: url(images/home-post-bottom.gif); background-repeat: no-repeat; background-position: bottom; margin: 0px 13px 10px 0px; padding: 0px; }
.home-post-wrap-2 { width: 313px; float: left; background-color: #262D2B; background-image: url(images/home-post-bottom.gif); background-repeat: no-repeat; background-position: bottom; margin: 0px 13px 10px 0px; padding: 0px; }
.post-inside { padding: 8px 13px 13px 13px; }
.post-inside-small { padding: 4px 13px 4px 13px; margin-top: 4px; float: left; }
.comments-bubble { background-image: url(images/comment-count-bg-Blue.gif); width: 18px; height: 15px; float: right; margin: 0px; padding: 0px 0px 0px 4px; color: #6D200C; display: block; }
.comments-bubble a, .comments-bubble a:visited, .comments-bubble a:hover { font-size: 8px; color: #6D200C !important; margin: -5px 0px 0px 0px; float: left; padding: 0px; }
blockquote { overflow: auto; padding: 0 10px; margin: 20px 30px; background: #1E2422; border: 1px solid #141918; }
#container { float: left; width: 940px; color: #CFCFCF; border-top: 1px solid #515E5B; background-color: #323C3A; background-image: url(images/content-bg.gif); background-repeat: repeat-x; }
#left-div { width: 654px; float: right; padding-left: 13px; }
.icons { margin-top: 0px; margin-bottom: -5px; margin-right: 10px; }
.post-info { color: #5B6461; font-size: 10px; display: block; border-top: 1px solid #3B4341; border-bottom: 1px solid #3B4341; padding: 2px 0px 2px 0px; margin: 0px 0px 5px 0px; }
.post-info-small { color: #5B6461; font-size: 10px; display: block; width: 228px; border-top: 1px solid #3B4341; border-bottom: 1px solid #3B4341; padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px; float: right; }
.post-info a { color: #5B6461; }
.logo { float: left; border: 0px; border-left: 1px solid #515E5B; }
.current-category { background-color: #3E4846; color: #FFFFFF; border: 1px solid #485351; padding: 5px; display: block; margin-bottom: 10px; width: 629px; }
.thumbnail { border: 5px solid #333E3C !important; margin-right: 10px; float: left; display: inline; }
.thumbnail-small { border: 3px solid #333E3C !important; margin-right: 10px; float: left; display: inline; }
.articleinfo { border-bottom: 1px solid #EEEEEE; padding-bottom: 7px; color: #545454; }
.adwrap { float: left; margin: 10px 0px 0px 9px;}
#about-image { float: left; margin: 0px 10px 5px 0px; border: 8px solid #394340; }
Увеличете...

Има и още но е много дълго..

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php elegant_titles(); ?></title>
<?php elegant_description(); ?>
<?php elegant_keywords(); ?>
<?php elegant_canonical(); ?>

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />



<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="logo"><a href="./index.php"></a></div>
<div id="wrapper2">
<?php if (get_option('egamer_468_enable') == 'on') { ?>
<?php include(TEMPLATEPATH . '/includes/468x60.php'); ?>
<?php } else { echo ''; } ?>
<div id="wrapper">


<div id="pages">
<?php $menuClass = 'nav superfish';
$menuID = 'nav2';
$primaryNav = '';
if (function_exists('wp_nav_menu')) {
$primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => $menuID, 'echo' => false ) );
};
if ($primaryNav == '') { ?>
<ul id="<?php echo $menuID; ?>" class="<?php echo $menuClass; ?>">
<?php if (get_option('egamer_swap_navbar') == 'false') { ?>
<?php if (get_option('egamer_home_link') == 'on') { ?>
<li <?php if (is_home()) echo('class="current_page_item"') ?>><a href="<?php bloginfo('url'); ?>"><?php _e('Начало','eGamer') ?></a></li>
<?php }; ?>

<?php show_page_menu($menuClass,false,false); ?>
<?php } else { ?>
<?php show_categories_menu($menuClass,false); ?>
<?php } ?>
</ul>
<?php }
else echo($primaryNav); ?>

<img src="<?php bloginfo('template_directory'); ?>/images/pages-bg-right-<?php echo(get_option('egamer_color_scheme')); ?>.gif" alt="pages bg right" style="float: right;" />

<div class="search_bg">
<div id="search">
<form method="get" action="<?php bloginfo('home'); ?>" style="padding:0px 0px 0px 0px; margin:0px 0px 0px 0px">
<input type="text" name="s" value="<?php echo esc_html($s, 1); ?>"/>
<input type="image" class="input" src="<?php bloginfo('stylesheet_directory'); ?>/images/search-button-<?php echo(get_option('egamer_color_scheme')); ?>.gif" value="submit"/>
</form>
</div>
</div>

</div>


<div id="categories">
<?php $menuClass = 'nav superfish';
$secondaryNav = '';
if (function_exists('wp_nav_menu')) {
$secondaryNav = wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'echo' => false ) );
};
if ($secondaryNav == '') { ?>
<ul class="<?php echo $menuClass; ?>">
<?php if (get_option('egamer_swap_navbar') == 'false') { ?>
<?php show_categories_menu($menuClass,false); ?>
<?php } else { ?>
<?php if (get_option('egamer_home_link') == 'on') { ?>
<li <?php if (is_home()) echo('class="current_page_item"') ?>><a href="<?php bloginfo('url'); ?>"><?php _e('Home','eGamer') ?></a></li>
<?php }; ?>

<?php show_page_menu($menuClass,false,false); ?>
<?php } ?>
</ul>
<?php }
else echo($secondaryNav); ?>
</div>
Увеличете...

Tова header .. къде греша?
 
маргина пречи ... потърси в интернет малко ... научи position: absolute,relative,innerhit за какво са и ще успееш ;)
 
По-скоро съм към дизайна,но и цсс може да поуча малко,но по-нататък..
изведнъж ей така без да знам CSS,няма да успея,повярвай :)

не е проблема там.. махнах го и пак нищо не се показва..

Код: 
.logo{background:url('http://fan-bg.com/wp-content/themes/eGamer/images/logo.jpg'); widht:381px;height:8

ако може да ми го нашишеш... :idea:
 
Не става. Ето ти целия цсс.. да видиш как съм го сложил.. да не би да не е на място.

http://fan-bg.com/wp-content/themes/eGamer/style-Blue.css
 
@Lasevg айде стига се излага, маргина пречил :D и не е innerhit, а inherit.

По темата... бутни дива с логото в wrapper2 дива или wrapper не съм сигурен, не съм ти следял точно кода и остави маргина, който ти казах.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе