If you need to make the image bigger, you must edit the image itself in an image editor.

If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want)...

CSS3 unleash the powers

This is possible to do in CSS3 with background-size.

All modern browsers support this, so unless you need to support old browsers, this is the way to do it.
Supported browsers:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+.

/* Will stretch to specified width/height */
  background-size: 200px 150px;
/* Will stretch to width/height of element */
  background-size: 100% 100%;

/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;
/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */ 
  background-size: cover;
/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */ 
  background-size: contain;

In particular, I like the cover and contain values that gives us new power of control that we didn't have before.


You can also use background-size: round that have a meaning in combination with repeat:

/* Resize to best fit in a whole number of times in x-direction */ 
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;

This will adjust the image width so it fits a whole number of times in the background positioning area.

Additional note
If the size you need is static pixel size, it is still smart to physically resize the actual image. This is both to improve quality of the resize (given that your image software does a better job than the browsers), and to save bandwidth if the original image is larger than what to display.



2016年9月7日 ... 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对 图片进行伸缩。语法:background-size: auto | | | cover | contain取 ...

CSS background-size property


Specify the size of a background-image with "auto" and in pixels: #example1 { ... The background-size property specifies the size of the background images.

CSS background-size 属性


background-size 属性规定背景图像的尺寸。 ... 如果只设置一个值,则第二个值会 被设置为"auto"。 测试 ... 以父元素的百分比来设置背景图像的宽度和高度。

css更改背景图片大小_leedaning的专栏-CSDN博客_css背景图片 ...


2015年5月18日 ... 最近项目中的一个页面用到的图片要比原图小很多,但是这个图片是以一个标记的 背景图显示的,不能像在中那样直接设置width、height的值来 ...

background-size - CSS: Cascading Style Sheets | MDN


Mar 15, 2021 ... The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, ...



2016年11月10日 ...background-size属性,你想给他多大的百分比都可以,不设置表示默认图片大小 ,设置100%表示全屏显示图片,按比例缩小或者放大。 例如:.

css怎么设置背景图片的大小? - html中文网


2019年9月20日 ... css可以通过background-size属性来设置背景图片的大小,它可以是像素(px) 或者是百分比(%)。使用语法 ...

理解CSS3中的background-size(对响应性图片等比例缩放) - 龙恩 ...


2016年3月10日 ... background-size的基本属性; 给图片设置固定的宽度和高度的; 固定 ... background- size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端 ...

Set size on background image with CSS? - Stack Overflow


CSS2. If you need to make the image bigger, you must edit the image itself in an image editor. If you use the img tag, you can change the size, ...

Resizing background images with background-size - CSS ...


The background-size CSS property lets you resize the background image of an element, overriding the default behavior of ...



2017年11月9日 ... ppt 背景图片怎么设置尺寸大小ppt 背景图片尺寸一般全屏的尺寸是多少, 做背景 图片一般是越大越清晰咯。 关键是看图片的长宽比例。 PPT 的 ...

css如何设置背景图片background属性添加背景图片- 知乎


2020年5月20日 ... 那么如何利用css设置html中用图片背景?本章就给大家介绍css怎样设置背景 图片。有一定的参考 ... background-size: 规定背景图片的尺寸

背景图片尺寸设置– Strikingly 客服中心


2021年3月5日 ... 一、我的背景图片尺寸应该是多大? Strikingly 的背景图片可以根据各种大小的屏幕 来调整图片大小,不管是移动端还是桌面端。我们推荐 ...

How to get div height to auto-adjust to background size? - Stack ...


Another, perhaps inefficient, solution would be to include the image under an img element set to visibility: hidden; . Then make the ...

The Perfect Facebook Cover Photo Size & Best Practices (2021 ...


Jan 13, 2021 ... Adding Contrast to Text & Photo. Having a busy Facebook background image can take away from your banner text. To help your text stand out, ...

How To: Resizeable Background Image | CSS-Tricks


May 15, 2008 ... As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or ...

How do I adjust the Windows background?


The Fit increases or decrease the height of the picture to fit the ...

Perfect Full Page Background Image | CSS-Tricks


Nov 20, 2010 ... We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword. html { background: url(images/ ...

Add or Change the Background Photo on Your Profile | LinkedIn Help


1584 (w) x 396 (h) pixels (recommended). If your background photo appears blurry or pixelated, please choose an image with a larger file size. Photos will also ...