JQuery UI фон изображение баннер за Вкладками

Я реализую вкладки JQuery в рубине приложения рельсов, где я хотел бы иметь баннер быть фоновым изображением позади вкладки в навигационной панели. Например, в следующем jsfiddle. Изображение кошки будет находиться в серой области позади вкладка «О себе».JQuery UI фон изображение баннер за Вкладками

В настоящее время высота вкладок, по-видимому, корректируется, чтобы соответствовать баннеру, однако она не отображается, и только серая область навигации по умолчанию отображается только по умолчанию.

вот код в моем _tab.html.erb:

<meta charset="utf-8" /> 

<title>title</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
$(function() { 
    $("#tabs").tabs({ 

    }); 
     }); 
</script>

здесь код:

<!DOCTYPE html> 
<html> 
<head> 
<%= render "shared/tab"%> 
</head> 

<body> 

<div id="tabs"> 

    <ul> 
    <li><a href="#tabs-1">About</a></li> 
    </ul> 
    <div id="tabs-1"> 
<%= render "shared/about"%> 
    </div>

я пытался добавить

#tabs{ background-image: url(images/banner2.jpg); }

в CSS файл, но это не сработало. Прошу прощения, если это простой вопрос, но любая помощь будет принята с благодарностью! Благодаря!!!

источник

2013-07-22 user1337902

Что нового в: http://jsfiddle.net/ambiguous/cjU7D/ и что вы делаете? Вы уверены, что 'images/banner2.jpg' - это правильный путь? –

Мне нужно изображение за вкладками, то есть область панели навигации - это баннер, а не внутри панели вкладок. Я не уверен, правильный ли URL, так как я использую Ror. Я просто использую путь по умолчанию, app> assets> images/banner2.jpg. Я предполагаю, что путь прав, поскольку панель навигации корректирует ее высоту, чтобы она соответствовала значению баннера. – user1337902

Если вы хотите, чтобы изображение в качестве фона для вкладки-бар, то вы хотели бы работать с <ul>, а не весь <div>, что-то вроде этого:

#tabs > ul { 
    background-image: url(/assets/banner2.jpg) 
}

Я переключил URL в /assets/banner2.jpg так как именно там сервер обычно найдет изображение. Вы также можете использовать вспомогательный помощник image_path, если у вас много таких вещей, и не возражайте, чтобы немного изменил свой CSS-код.

Демо: http://jsfiddle.net/ambiguous/cjU7D/1/

источник

2013-07-22 05:53:57

Просто сделать его фоном для UL, вместо вкладок дел.

#tabs ul { 
    background-image: url(http://placekitten.com/500/100); 
}

источник

2013-07-22 05:53:59 AgmLauncher

JQuery UI фон изображение баннер за Вкладками

ответ

Смежные вопросы