- ベストアンサー
Blockquoteの背景の画像のwidthを調節したい [スタイルシート]
こんにちは。ブログのテンプレートを作っています。 そこで、blockquoteの背景に画像を使用しているのですが、この画像のwidthをbcockquoteのwidthに応じて変更させることは可能でしょうか？ 現在のCSSの設定は以下のようになっています。 blockquote{ background: #EEE url(img/blockquote.png) no-repeat bottom left; /*border: 1px solid #E0E0E0;*/ padding: 10px 10px 30px 10px; margin: 1em 1em 1em 3em; width:400px; } 使用している画像(blockquote.png)のwidthが250pxで、photoshopで直接加工してしまってもいいのですが、何とかしてweb側で400pxに引き伸ばす事ができたらなぁ、と思っています。 <img>タグのように簡単にないものでしょうか？ご存知の方おられましたらどうぞよろしくお願いいたします。
- jyuu
- お礼率83% (553/665)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
background-imageの伸縮はできません。
関連するQ&A
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- CSS dtの中に画像を入れた時に
CSS dtの中に画像を入れた時に dtの文字が下にずれてしまいます。 画像を消すと問題無いので、画像の指定に原因があると思うのですが・・・。 ■css ---------------------------------------- .sub{ clear:both; width:420px; } .sub dt{ float:left; padding:0 0 0 0; width:200px; height:38px; line-height:38px; background:url(../img/sub-bg2.jpg) no-repeat; font-size:1em; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } .sub dt img{ padding:0 0 0 0; width:4px; height:38px; } .sub-menu dd{ float:right; width:180px; height:38px; line-height:38px; font-size:1em; background-color:#ffffcc; text-align:right; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } ■html --------------------------------------- <dl class="sub"> <dt><img src="../img/a.png" width="4" height="38" alt="aa" />テキスト</dt> <dd>あいうえお</dd> </dl> お分かりになる方、宜しくお願いします。
- ベストアンサー
- HTML
- ホームページの背景画像が途切れてしまう。
こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像１を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40ｐｘ×40ｐｘの背景画像２を「repeat」指定しています。 この背景画像２が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの２種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか？？ よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------
- ベストアンサー
- デザイナー・クリエイティブ職
- スタイルシートの・・・
スタイルシートをなんとか改変して、画像をランダム表示するように したいのですが自分では知識不足でできません＞＜ どう改変すればできるのか、どなたかお願いします。 /* トップ画像指定(アドレス、と画像の縦幅横幅も指定) */ #head { width:200px;/*横幅*/ height:150px;/*縦幅*/ margin:0px 1px; background:url(../img/画像データ.PNG) no-repeat center center;/* 画像アドレス */ border:1px solid #333333;/* 画像周りのライン */ }
- ベストアンサー
- その他（ITシステム運用・管理）
- Liで背景画像が表示されない （Safari、Operaにて）
こんにちは。 同じような質問が続いていますが、違うものでございます。 以下のようなcssを組んだのですが、なぜかSafari、Operaでは文頭の画像が表示されません。 （ちなみに画像は幅4px、高さ5px） なぜかお分かりになる方がいらしたら、教えていただければと思います。 #box { width: 160px; color: #333333; background-color:#ffffff; border-right:1px solid #333333; border-top:2px solid #CC0033; } #box ul { list-style:none; margin:0 0 2px 0; padding:0 0 0 1.2em; line-height:1.7; } #box ul li { margin:0px; padding:0 0 0 0.8em; font-size:75%; color: #CC0033; background-color: #FFFFFF; background: 0 url(../images/pt-sub.gif) no-repeat 0.5em; border-bottom:1px dotted #aaaaaa; list-style:none; }
- ベストアンサー
- HTML
- 背景色を変更した所、文字が背景色と被って見づらく
引き続き質問です。元からあった無料cssテンプレートは背景が黒く、 暗いイメージを持たれると困るとのことで白色の背景に変更しました。 すると、ホームページに記載されている文字が白色の為何が書いて あるか見えなくなってしまいました。 現在は全てのサイト上の文字に<font color="black">何でも</font> というタグを付けて応急措置を考えておりますが、元から文字の色を 全て黒色に指定することはできないものでしょうか。 HPは全くの素人で、どの部位を変更すると良いかご指南いただければ幸いです。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ html { overflow-y:scroll; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; font-family:Verdana, Helvetica, sans-serif; font-size:13px; color:#fff; background:#FFF; } br { letter-spacing:normal; } a { color:#d1d1d1; text-decoration:none; } a:hover { color:#666; } img { border:0; vertical-align:bottom; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ #top { width:780px; margin:0 auto; } #contents { float:left; width:780px; } #side { float:left; width:220px; background:#181818; padding:10px 0; } #main { float:right; width:540px; padding:10px 0; } #footer { width:540px; margin-left:240px; } /* ========SIDE CUSTOMIZE======== */ #side h1 { margin:0; font-size:24px; } #side h1 a { color:#fff; } #side h1 a:hover { color:#ddd; } #side div.section { margin:0 10px; } /* ========MENU CUSTOMIZE======== */ #menu ul { margin:0 auto; padding:10px 0; } #menu li { color:#333; text-align:center; list-style-type:none; } #menu li a { display:block; width:220px; color:#f1f1f1; line-height:60px; } #menu li a:hover { color:#f1f1f1; background:#2d2d2d url("../images/bg_menu.gif") 0 0 repeat; } /* ========MAIN CONTENTS CUSTOMIZE======== */ #main #pr p { margin:0; padding:5px 0; } #main #icatch { margin-bottom:10px; } #main a { color:#d1d1d1; } #main a:hover { color:#f1f1f1; text-decoration:underline; } #main h2 { margin-bottom:8px; padding:0 0 0 10px; font-size:15px; font-weight:bold; line-height:35px; border:1px solid #3e3e3e; background:#181818; } #main h3 { clear:both; margin:20px 0 8px 0; padding:0 0 0 5px; font-size:14px; border-left:5px solid #3e3e3e; } #main h4 { margin-bottom:2px; font-size:14px; border-bottom:2px solid #f1f1f1; } #main h5 { margin-bottom:2px; padding:2px 5px; font-size:13px; background:#3e3e3e; } #main h6 { margin-bottom:2px; font-size:13px; border-bottom:2px solid #3e3e3e; } #main p { margin:0 0 1em 0; } #main dt { margin-bottom:3px; } #main dd { padding:0; margin:0 0 0.5em 1em; padding:3px; color:#ddd; background:#181818; } /* INFORMATION CUSTOMIZE */ * html body #main dl.information dd div { display:inline-block; } #main dl.information dt { float:left; width:10em; margin:0; padding:0; color:#fff; } #main dl.information dd { margin:0 0 0.5em 10em; padding:0; color:#fff; background:transparent; } #main table { width:100%; border-collapse: collapse; } #main table th { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; background:#181818; } #main table td { padding:5px; font-size:12px; text-align:left; border:1px solid #ddd; } /* ========PAGETOP CUSTOMIZE========= */ #pageTop { padding:10px 0; text-align:right; font-size:11px; } #pageTop a{ padding:0 0 0 12px; background:url("../images/bg_pagetop.gif") 0 60% no-repeat; } /* ========FOOTMENU CUSTOMIZE======== */ #footMenu ul { margin:0; padding:10px 0 0 0; text-align:right; border-top:1px solid #b4b4b4; } #footMenu li { display:inline; margin:0 0 0 10px; list-style:none; } よろしくお願いします。
- ベストアンサー
- HTML
- CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？
初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。
- 締切済み
- HTML
- フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(.gif); padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 color: #8b1c62 } ul.sidemenu ul {margin: 0; padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～ <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
- HP作成で背景画像が表示されないです・・
いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとｃｓｓを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 － html － <body> <div id="container"> <div id="header"> →背景画像表示されます。 <p>＊＊＊＊＊</p> </div> <div id="box"> <div id="left"> →背景画像表示されます。 <p>＊＊＊＊＊ </p> </div> <div id="right"> →背景画像表示されません。テキストは表示されます。 <p>＊＊＊＊＊</p> </div> </div> <div id="footer"> <p>＊＊＊＊＊</p> </div> </div> </body> － ｃｓｓ － #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }
- ベストアンサー
- ホームページ作成ソフト
- fc2ブログのスタイルシートについて
h1～h6タグの文字の大きさ＆改行（しない）を変更したいのですが、 fc2ブログのスタイルシートのどこに書き込めばいいのか分からない状態です。 色々調べてみたのですが、どうしても分からないので、分かる方がいましたら、教えて下さい。 よろしくお願いします。 ソースは、こちらになります。 （文字数が足りないので数ヵ所省きました）↓ body{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic","Arial","Osaka"; margin:0px; margin-left:auto; margin-rught:auto; padding:0px; background-color: #FFFFFF; color:#666666; text-align:center; letter-spacing:1px; word-break: break-all; } #container{ width:840px; margin-right:auto; margin-left:auto; padding:0px 0px; background-color: #FFFFFF; border-left:1px solid #DECE21; border-right:1px solid #DECE21; } /* ### 共通のタグ ### */ blockquote{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:15px 0px; padding:10px; background-color:; border:1px dashed #996600; font-size:12px; line-height:150%; width:90%; voice-family:"\"}\""; voice-family:inherit; width:90%; } html>body blockquote{ width:90%; } blockquote p{ margin:0px 0px; padding:0px; line-height:150%; } h1.blogtitle{ position:absolute; width:820px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px; top:3px; left:20px; color:#333333; font-size:24px; font-weight:normal; z-index:1; } h1.blogtitle_back{ position:absolute; width:818px; font-family: "Century Gothic","MS UI Gothic","ＭＳ Ｐゴシック", "Arial","Osaka"; padding:0px; margin:0px 0px 0px 1px; top:4px; left:21px; color : #CCCCCC; font-size:24px; font-weight:normal; z-index:0; } /* ### メイン部（左側） ### */ #main{ width:590px; float:left; margin:0px; padding:0px; } #contents{ margin:0px 20px 0px 20px; padding:0px; text-align:left; width:590px; voice-family:"\"}\""; voice-family:inherit; width:550px; } html>body #contents{ width:550px; } /* ### エントリー（記事） ### */ .e_title{ font-family: "MS UI Gothic", "Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; height:20px; text-indent:60px; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; color:#967B3F; font-size:14px; font-weight:bold; letter-spacing:1px; } .e_date{ font-family: "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic", "Arial","Osaka"; margin:0px 0px 30px 60px; text-align:left; color:#999999; font-size:10px; line-height:150%; letter-spacing:1px; } .e_body{ font-family: "MS UI Gothic","Verdana","ＭＳ Ｐゴシック", "Arial","Osaka"; margin:0px 0px 15px 0px; margin-bottom:25px; padding:0px ; color:#444444; font-size:12px; line-height:155%; letter-spacing:1px; } .e_body img, .e_body a img{ margin:2px; border:0px; } .e_body_w{ margin:0px; padding:5px 15px 5px 15px; background-attachment: scroll; background-image: url(http://blog-imgs-41.fc2.com/a/w/i/awitchsally/aws_np03_point.gif); background-repeat: no-repeat; background-position: 0% 0%; border:1px solid #E9F3E9; } .e_more{ margin:30px 0px 15px 0px; padding:0px; text-align:left; color:#333333; font-size:10px; font-weight:bold; letter-spacing:1px; } .e_state{ font-family: "Verdana","ＭＳ Ｐゴシック","MS UI Gothic", "Arial","Osaka"; margin:5px 0px; text-align:left; color#967B3F; font-size:10px; letter-spacing:1px; line-height:150%; font-weight:bold; }
- ベストアンサー
- HTML
お礼
そうなんですか。残念ですけどはっきりと仰っていただいて諦めがつきました。ありがとうございます！