ヘッダー部分：画像の繰り返し、なおかつ角丸

質問

はじめまして。
photoshopやweb制作を学び始めた初心者です。

http://www.sive.jp/memory/
こちらのサイトのトップページヘッダー部分は、
角丸であり、その中身はグラデーション・斜線が描かれています。

これは繰り返しなどせずに
そのまま画像を貼り付けているのでしょうか？

それとも横幅を１０px程度に縮小した画像を
横へ繰り返しているのでしょうか？

しかし、そうすると
角丸まで繰り返されてしまうと思うのですが
どうやってやっているのでしょうか？

ご回答どうかよろしくお願いいたします＞＜

回答No.4

noname#100277 · ベストアンサー

該当する箇所のCSSを以下に書き出す。

h1, #header {
background-image:url(images/bgHeader.jpg);
background-repeat:no-repeat;
margin:0 auto;
overflow:hidden;
text-align:left;
width:754px;
}

#main h2 {
background-color:#FFFFFF;
background-image:url(blogimg/h2.png);
background-position:left center;
background-repeat:no-repeat;
clear:both;
color:#000000;
font-size:115%;
font-weight:bold;
margin-bottom:0;
margin-top:0;
padding:13px 20px 10px 10px;
}

基本的に此の手の画像は一枚絵です。
表組みで角丸するのとは別の次元です。

回答No.3

koke29

例2のサイトも背景は一枚絵でしたよ

ブラウザがFirefoxなら
チェックしたい画像を右クリック→
（背景なら）「背景画像だけを表示」でどんな風になってるかわかります
（ブツ切を並べているのか、一枚なのか）

↑自分で確認できるように、参考まで。

回答No.2

se-nabe

一枚絵を使うのが一般的かどうか、
それは一概には言えませんが、
たとえば縦1000px 横800pxの背景の角を丸くしたい。

なんてときに一枚絵だったらどうですかね？
結構重いと思います。

それとは逆に、縦30px 横100p見たいな画像で、
一ページに20個くらい出てくるにもかかわらず、
全部丸いところは画像、そのほかはrepeatしていたらどうでしょう？

ソースを見たくありません。

なんて感じで画像の大きさ、用途、などによって変えればいいと思います。

例えばこちらのサイトの見出し（Ｈ２タグのところ）にも
これもぱっとみですが、背景指定ですかね？
その上にプレーンテキストでテキストを書いているようです。

回答No.1

se-nabe

ぱっと見ですが、一枚絵の画像をbackgroundで指定しているように見えます。

（メモリの影とかもついてますし。）
repeart-y -xで角丸はできません。
丸くなっている場所の画像を両サイド、または上下につけて、真ん中だけループさせたりならできますが、

そのほかajaxとか、jqueryなんかを使えば画像を用意しなくてもできると思います。

お礼

すばやいご回答ありがとうございます☆
やはり角丸をやりたい場合は
１枚の画像で指定するのが一般的なのですかね？

http://www.zerofactory.co.jp/
例えばこちらのサイトの見出し（Ｈ２タグのところ）にも
角丸＆グラデーションですが、
これも１枚の画像を背景指定しているのですかね？

度々すみません＞＜