css3 cover,CSS3 background-size: cover doesn't make image

本文介绍如何使用CSS背景图片填充整个浏览器窗口的方法。一种方法是直接通过CSS属性设置背景图片,并利用`background-size: cover`使其适应屏幕大小。另一种方法则是通过HTML元素加载图片并调整其尺寸比例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Are you interested in only using a CSS background image? This can be done by loading an image and constraining it with the CSS.

Would either of these examples work?

HTML

bodyBackground1.jpg

CSS

html {

background: url(images/bodyBackground1.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

body {

background:#fff;

margin: 0;

padding: 0;

overflow:hidden;

}

html, body {

height: 100%;

}

img.bg {

/* Set rules to fill background */

min-height: 100%;

min-width: 1024px;

/* Set up proportionate scaling */

width: 100%;

height: auto;

/* Set up positioning */

position: fixed;

top: 0;

left: 0;

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */

img.bg {

left: 50%;

margin-left: -512px; /* 50% */

}

}

Or this one? This one loads images from a database into an array and loads them at random, but you might be able to glean some info from this:

PHP load function

$bg_images = array(

0 => 'comp1.png',

1 => 'comp2.png',

2 => 'comp3.png',

....

);

$image = $bg_images[ rand(0,(count($bg_images)-1)) ];

$showBG = "%22";

?>

HTML

...

...

CSS

html, body {

margin:0;

height:100%;

}

img.source-image {

width:100%;

position:absolute;

top:0;

left:0;

z-index:0;

min-width:1024px;

}

These options should fill up the browser window according to the height and width.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值