質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

4回答

1094閲覧

cssで境界の画像が上手く表示されない

moitaro

総合スコア443

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/04/01 07:24

編集2022/01/12 10:55

お世話になっております。

件名の通りcssで境界の画像が上手く表示されなくて困っております。

構成のhtmlページがあり
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
div#navMainWrapper

<div id="navMainSearch">|<div id="navMain"> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <div id="logoWrapper"> |<div id="taglineWrapper"> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <table id="contentMainWrapper"> : ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

cssで
div#navMainWrapper {
width: 800px;
height: 48px;
margin: 0 auto;
border-bottom: solid 10px #ff0; /なんか黄色くなった……/
border-image:url("images/logo_back.jpg") left top repeat-x;
}

と指定して
border-bottom: solid 10px #ff0;
の所に境界の画像
border-image:url("images/logo_back.jpg") left top repeat-x;
を持ってきたいと思っているのですが
表記方法は上記では画像が表示されなかったのでお問い合わせいたします。

指定の境界に画像を持って行く方法をご助力頂けないでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/04/01 07:35

「駄目だった」を具体的にご記入いただけますか。
guest

回答4

0

下だけにボーダー画像を敷きたいなら、backgroundの設定でいいと思います。

css

1div#navMainWrapper { 2 background:url("images/logo_back.jpg") bottom repeat-x; 3}

投稿2016/04/01 10:49

yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

border-image:url("images/logo_back.jpg") left top repeat-x; のleftやtopは何を意図しているのでしょうか。
border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeatで取りうる値かどうか確認してみると良いでしょう。
下記ページを参照すると、leftやtopといった記述は見当たらないようです。

CSS3リファレンス
http://www.htmq.com/css3/index.shtml

投稿2016/04/01 07:47

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moitaro

2016/04/01 08:01

コメントありがとうございます。 古いソースを引っ張ってきただけで特に意味はありません…… 削除しても良いですね…… リファレンスのURLもありがとうございます。 ちょっと調査してみます。
moitaro

2016/04/01 08:11

うーん div#navMainWrapper { : border-image: url("images/logo_back.jpg") 15 round stretch; border-style:solid; border-width:15px; } で指定するとまわり全体に適用されるので 底だけに適用させたいのです…… お忙しい中大変申し訳ないのですが ご助力いただけないでしょうか?
退会済みユーザー

退会済みユーザー

2016/04/01 08:44

上下左右の枠それぞれ、別divで実現してはいかがでしょうか。
guest

0

yamato_hikawaさんが指摘しているように、
無理にborder-imageを使わずにbackground-imageで#navMainWrapperの下辺に
背景画像を貼れば良いのではないでしょうか。

作りたいデザインが分からないのでアレですが、
お話を聞く限りではborder-imageを使わなければならない理由が無いように見受けられます。

投稿2016/04/01 22:54

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

これでいけませんか?

CSS

1/* border-width:15px; */ 2/* ↓↓↓↓↓↓↓↓↓ */ 3border-width:0 0 15px 0;

投稿2016/04/01 09:00

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問