ページ全体のグラフィックバナーとタイプ処理を追加して、PortfolioPageWordpressテーマを改訂しようとしています。レスポンシブなテーマですが、どうやら私は物事を台無しにしてしまいました。cssは、x軸のbackground-repeatを使用して、いくつかの木の板を全画面表示で繰り返し、その上に、応答して中央に配置される他のグラフィックを配置します。これが私が話しているcssです：
#bgImageCornerTL
{
position:relative;
top:0px;
left:0px;
margin-top:0px;
height: 274px;
width: 100%;
z-index: 10;
background-image:url(http://chalupaholics.com/bob/wp-content/uploads/2012/10/PanelWStripe.png);
background-repeat:repeat-x;
background-position: center center;
}
#LogoContent {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -250px;
width: 872px;
height: 198px;
z-index: 12;
background-repeat: no-repeat;
background-image: url("/bob/wp-content/uploads/2012/10/BufBobwords.png");
opacity: 0.9;
}
リピートがiPhoneで機能していません。そこで、「メディア」クエリを介して実行する必要のあるcssをいくつか作成しましたが、iPhoneがそれを取得せず、ページが正しく表示されません。（iPhoneの場合、ヘッダーに1つのグラフィックを使用し、グラフィックと木の板を1つのグラフィックに平坦化します。）誰かが私が間違っていることを見つけることができますか？CSSは次のとおりです。
@media screen and (max-device-width: 480px) {
{
#bgImageCornerTL
{
position:relative;
top:0px;
left:0px;
margin-top:0px;
height: 147px;
width: 100%;
z-index: 10;
background-image:url(http://chalupaholics.com/bob/wp-content/uploads/2012/10/TopBannerIphone.png);
background-repeat:no-repeat;
background-position: center center;
}
#LogoContent,#Tasty,#Address,#Order {
display:none;
}
}
等々...
そして、新しいグラフィックを処理するためにいくつかのdivを追加したheader.phpファイルの関連領域は次のとおりです。
<div id="bgImageCornerTL"></div>
<div id="navwrap"></div>
</head>
<body>
<div id="LogoContent">
<div id="Tasty"></div>
<div id="Address"></div>
<div id="Order"></div>
</div>
<div id="wrapper">
など...通常のサイズの画面では問題なく見えますが、iPhoneでは壊れます。私はまだ他のデバイスを試していません。
ご覧になりたい場合は、次のURLをご覧ください。
http://www.chalupaholics/bob/
ありがとう