helixxchi

テクノロジープログラミング一般的なカテゴリ

Divに合わせたCss背景画像サイズ-複数の画像を追加

23 9月 2021

複数の画像を追加、レスポンシブ画像とメディアクエリを使用してdivに合わせたcss背景画像サイズ、領域をカバーするがアスペクト比を維持する、領域を埋めるために画像を拡大する、アスペクト比を維持する、画面に合わせて背景サイズを設定する、スケーリングの幅、CSS、HTML5画像要素、レスポンシブ画像を使用したレスポンシブ画像の追加：役立つヒント。

divに合うcss背景画像サイズ

構文：

background: value;
-webkit-background-size: value;
-moz-background-size: value;
-o-background-size: value;
background-size: value;

background: value;

-webkit-background-size: value;

-moz-background-size: value;

-o-background-size: value;

background-size: value;

背景画像をdivに合わせる
background-sizeプロパティを使用する

background-size: contain;

1 2	background-size: contain;

背景画像を拡大縮小する

background-size: cover;

1 2	background-size: cover;

background-size: 100% 100%;

1 2	background-size: 100% 100%;

例1：完全なフルページの背景画像

CSSで画像を背景全体に塗りつぶす例

html { 
  background: url(demo/media/wallpaper.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html {

background: url(demo/media/wallpaper.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

例2：HTMLストレッチ背景画像

<!DOCTYPE html>
<html>
<head>
<title>Resizing background images with background-size</title>


<style type="text/css">
.background {
box-sizing: border-box;
width: 100%;
height: 200px;
padding: 2px;
background-image: url(/fruites/new/mango.gif);
border: 1px solid black;
background-size: 100% 100%;
}
</style>

</head>
<body>


<div class="background">
Stretched background...
</div>
<p>And here is the image at it's original size:</p>
<img src="/fruites/new/mango.gif" style="border:1px solid black;">

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Resizing background images with background-size</title>

.background {

box-sizing: border-box;

width: 100%;

height: 200px;

padding: 2px;

border: 1px solid black;

background-size: 100% 100%;

}

</style>

</head>

<body>

Stretched background...

</div>

<p>And here is the image at it's original size:</p>

</body>

</html>

例3：ページ全体の背景画像を拡大する

<!DOCTYPE html>
<html>
<head>
<title>Resizing background images with background-size</title>


<style type="text/css">
html, 
body {
height: 100%;
}

body {
background-image: url(/fruites/new/mango.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>

</head>
<body>


<p>This page has a stretched background image...</p>

<p>And here is the image at it's original size:</p>
<img src="/fruites/new/mango.gif" style="border:1px solid black;">

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Resizing background images with background-size</title>

html,

body {

height: 100%;

}

body {

background-repeat: no-repeat;

background-size: 100% 100%;

}

</style>

</head>

<body>

<p>This page has a stretched background image...</p>

<p>And here is the image at it's original size:</p>

</body>

</html>

例4：background-sizeの使用：cover

<!DOCTYPE html>
<html>
<head>
<title>Resizing background images with background-size</title>


<style type="text/css">
html, 
body {
height: 100%;
}

body {
background-image: url(/fruites/new/mango.gif);
background-repeat: no-repeat;
background-size: cover;
}
</style>

</head>
<body>


<p>This page has a stretched background image...</p>

<p>And here is the image at it's original size:</p>
<img src="/fruites/new/mango.gif" style="border:1px solid black;">

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Resizing background images with background-size</title>

html,

body {

height: 100%;

}

body {

background-repeat: no-repeat;

background-size: cover;

}

</style>

</head>

<body>

<p>This page has a stretched background image...</p>

<p>And here is the image at it's original size:</p>

</body>

</html>

例5：background-sizeの使用：contain

<!DOCTYPE html>
<html>
<head>
<title>Resizing background images with background-size</title>


<style type="text/css">
html, 
body {
height: 100%;
}

body {
background-image: url(/fruites/new/mango.gif);
background-repeat: no-repeat;
background-size: contain;
}
</style>

</head>
<body>


<p>This page has a stretched background image...</p>

<p>And here is the image at it's original size:</p>
<img src="/fruites/new/mango.gif" style="border:1px solid black;">

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Resizing background images with background-size</title>

html,

body {

height: 100%;

}

body {

background-repeat: no-repeat;

background-size: contain;

}

</style>

</head>

<body>

<p>This page has a stretched background image...</p>

<p>And here is the image at it's original size:</p>

</body>

</html>

お見逃しなく： css背景画像の不透明度

Webページに合わせて背景画像を拡大する方法

フォールバックウェイを使用してdivに合うcss背景画像サイズ

body {
 background: url('wallpaper.jpg');
 background-repeat: no-repeat;
 background-size: 100%;
 background-position: center;
}

body {

background: url('wallpaper.jpg');

background-repeat: no-repeat;

background-size: 100%;

background-position: center;

}

複数の画像を追加する

Toptal Subtle Patternsの例の背景パターン：divに合わせたcss背景画像サイズ

div {
   height: 300px;
   width: 100%;
   background-image: 
       url("demo/media/wallpaper.jpg"),
       url("demo/media/wallpaper2.jpg");
   background-repeat: no-repeat, no-repeat;
   background-position: right, left; 
}

div {

height: 300px;

width: 100%;

background-image:

url("demo/media/wallpaper.jpg"),

url("demo/media/wallpaper2.jpg");

background-repeat: no-repeat, no-repeat;

background-position: right, left;

}

例1：画面に合わせてbackground-sizeを設定する

html {    
    background: url('wallpaper.png') no-repeat center fixed;     
    background-size: cover;
}

html {

background: url('wallpaper.png') no-repeat center fixed;

background-size: cover;

}

HTML5画像要素を使用する

<picture>
  <source  media="(max-width: 300px)">
  <source >
  <img src="wallpaper.jpg" alt="cannot display">
</picture>

</picture>

例2：画面に合わせたCSS背景画像のサイズ

divに合うcss背景画像サイズ

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resizing background images with background-size</title>
<style>
body {
background-image: url(images/wallpaper.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
#container { width: auto; margin: 50px auto; padding: 20px; background: #eee; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
</style>
<head>
<body>
<div id="container">
<h2>CSS background image size to fit full screen - how to create - example</h2>
This is a way to add background image for a web page using html. <br />
In this case I used:<br />
<strong>html</strong> 
to cover the entire background. <br />
</div>
<html/>
</body>

<!DOCTYPE html>

<html>

<head>

<title>Resizing background images with background-size</title>

<style>

body {

background-position: center center;

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

}

h2 {

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

font-weight: bold;

}

#container { width: auto; margin: 50px auto; padding: 20px; background: #eee; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }

</style>

<head>

<body>

<h2>CSS background image size to fit full screen - how to create - example</h2>

This is a way to add background image for a web page using html. <br />

In this case I used:<br />

to cover the entire background. <br />

</div>

<html/>

</body>

お見逃しなく：グラデーションオーバーレイCSS

別の方法：

body {
background: url(wallpaper.jpg) no-repeat;
background-size: 100%;
}

body {

background: url(wallpaper.jpg) no-repeat;

background-size: 100%;

}

私はあなたがについてのアイデアを得ることを願っています divに合うcss背景画像サイズ。
フィードバックをお願いします infinityknow.com。
この記事に関する貴重なフィードバック、質問、コメントはいつでも歓迎します。
この投稿を楽しんで気に入った場合は、共有することを忘れないでください。

参考資料 : www.pakainfo.com