19

I have an JPG image with size 1024 x 724. My page size is not fixed. My requirement is: If I resize the page then the background image should also resize and fit to the page.

Also I don't want to keep the image related information in my Html page/JSP. I want to do this using plain CSS. I am not using CSS3. Because there is an attribute called background-size which can make the image stretch to the page width and height. Currently only Google Chrome supports this. Any help ?

Puru
  • 8,913
  • 26
  • 70
  • 91

6 Answers6

24

You can't resize background images with CSS2.

What you can do is have a container that resizes:

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img src='whatever.jpg' style='width:100%;height:100%' alt='[]' />
</div>

This way, the div will sit behind the page and take up the whole space, while resizing as needed. The img inside will automatically resize to fit the div.

Ben
  • 54,723
  • 49
  • 178
  • 224
  • I don't want to keep the image and its source in Html page. – Puru Nov 03 '10 at 08:48
  • Simple solution! By the way, you can also use `left:0;top:0;right:0;bottom:0;` instead of `width:100%;height:100%`. – Denilson Sá Maia Nov 03 '10 at 08:48
  • (Of course don't put the `style` attribute inline like my example; use a header style block or external sheet.) – Ben Nov 03 '10 at 08:48
  • @Multiplexer - if it's in CSS, it's already in the HTML page, in the background! – Ben Nov 03 '10 at 08:49
  • @Steve - But I have many different pages. If I keep at one place it won't apply to all the other pages. I want to keep this in all the other pages. – Puru Nov 03 '10 at 08:51
  • @Multiplexer - have a server-side script template that outputs the HTML code when you need it (I'd use PHP). Not as hard as it sounds. – Ben Nov 03 '10 at 08:52
  • @Steve - I am using JSP. Is it possible to include that image in all the pages ? – Puru Nov 03 '10 at 08:56
  • @Multiplexer - yes, just make a function to output a string that's common to all pages, then call the function on each page, instead of writing a pile of code. – Ben Nov 03 '10 at 09:01
  • @Steve - I don't want to make change in all the pages. There are more than 100 pages are there. – Puru Nov 03 '10 at 09:05
  • @plex Well, then CSS3 (not widely supported) or Javascript (dynamically create and insert the absolute div on page load) sound like the only solutions remaining. Or a CSS redesign/streamline. – Ben Nov 04 '10 at 00:22
  • Or a better server-side engine that allows you to easily change code in all pages at once. Really, this should not be a difficult problem. And, if it is, then you need to refactor some code, or even use a different tool for this job. – Denilson Sá Maia Nov 05 '10 at 12:00
  • @Denilson Sá (re: left/top/right/bottom), this will break in IE 6, which will ignore the bottom and right values entirely. There's no reason in this case not to use width/height 100% aanyway. – eyelidlessness Dec 28 '10 at 08:38
  • width/height 100% might be not be a good idea if you have borders and padding. In this case, however, both solutions work. (and IE6 is broken in so many ways...) – Denilson Sá Maia Dec 29 '10 at 14:55
  • Downvoted because this is incorrect: "You can't resize background images with plain CSS." –  Mar 16 '14 at 23:05
16

try something like

background: url(bgimage.jpg) no-repeat;
background-size: 100%;
heximal
  • 10,327
  • 5
  • 46
  • 69
  • 3
    Bear in mind that `background-size`, as a CSS3 property, is currently not very widely-supported and vendor extensions should be used as well for now. – BoltClock Nov 03 '10 at 08:44
  • 1
    Nowadays it's pretty secure to use this property! http://www.w3schools.com/cssref/css3_pr_background-size.asp – hugronaphor Mar 19 '15 at 20:39
  • 1
    background:url(bgimage.jpg) no-repeat; background-size: cover; This did the trick – degee Jul 15 '15 at 02:56
4

You can either use JavaScript or CSS3.

JavaScript solution: Use an absolute positioned <img> tag and resize it on the page load and whenever the page resizes. Be careful of possible bugs when trying to get the page/window size.

CSS3 solution: Use the CSS3 background-size property. You might use either 100% 100% or contain or cover, depending on how you want the image to resize. Of course, this only works on modern browsers.

Denilson Sá Maia
  • 47,466
  • 33
  • 109
  • 111
3

Depending on what kind of image you have, it might be better to rework the design so that the main image fades to a set solid color or repeatable pattern. If you center the image in the page and have the solid color as the backgroud.

See http://www.webdesignerwall.com/trends/80-large-background-websites/ for examples of sites using large or scalable backgrounds.

james
  • 41
  • 2
1

These three line all together worked for me.

background-image: url("pages/images/backImage.png");
background-size: 100%;
background-repeat: no-repeat;
Ammad
  • 4,031
  • 12
  • 39
  • 62
0

background:url(bgimage.jpg) no-repeat; background-size: cover;

This did the trick

degee
  • 173
  • 2
  • 11