「幅100%で背景画像を敷いて、その中に幅900pxのコンテンツを作る」みたいな場合、どのように作ってらっしゃいますか?<div class="幅100%で背景画像を敷いたボックス"> <div class="幅900pxのコンテンツ"> コンテンツ部分 </div></div>今まで↑のように作っていたんですが、個人的にdivボックスをいっぱい重ねるのが好きじゃないので、効率の良いもっとシンプルな書き方が無いかなーと悩んでいます。
俺も基本スレ主と同じです。divを1つにしたいなら擬似要素でできないかな?
ありがとうございます。擬似要素でどうやってできるんでしょうか…?beforeとかafterとかですかね??
そうそう。試してないけどね。absoluteの横100%で配置した擬似要素ね。
自分も同じマークアップだな。sectionタグで括ればdiv重ならないし構造化されたマークアップになるのでは。
ありがとうございます。sectionとかarticleとか使うと構造が綺麗になりますね!でもどちらかというと…<div class="背景画像は100%だけどコンテンツは900pxのボックス">コンテンツ</div>のように、一つのボックスで全部まかなえる画期的な方法は無いかな~と思ったんです。これ絶対便利だと思うんですけど…
敬愛すべきIE様がいらっしゃいますが、今だとこんな感じでもいいかもですね。div{ background-iamge:url(img1.jpg),url(img2.jpg); background-size: 900px auto,auto; background-position:center 0,0 0; background-repeat: no-repeat,repeat; padding: 0 calc(50vw - 900px/2); }
見たこと無い書き方でした…!一度試して見ます。ありがとうございます!IEは…まあ…
背景画像は <body> に指定すりゃいいじゃん。なんで <div> 2重にしてんの?
私もそう思ったが、一部に背景しくのかなとおもったんでだまってた
言葉足らずですみません。コンテンツごとに交互に背景を敷きたかったので、<body>には入れたくなかったんです…。そのような場合、どうしていますか?
LPかな?<body><section class="block 1000px"><div class="warp 900px"></div><section>...</body>
みんなの回答 4 件
俺も基本スレ主と同じです。divを1つにしたいなら擬似要素でできないかな?
自分も同じマークアップだな。sectionタグで括ればdiv重ならないし構造化されたマークアップになるのでは。
敬愛すべきIE様がいらっしゃいますが、今だとこんな感じでもいいかもですね。
div{
background-iamge:url(img1.jpg),url(img2.jpg);
background-size: 900px auto,auto;
background-position:center 0,0 0;
background-repeat: no-repeat,repeat;
padding: 0 calc(50vw - 900px/2);
}
背景画像は <body> に指定すりゃいいじゃん。
なんで <div> 2重にしてんの?
関連するトピックス