All geek questions in one place

CSS image resizing

I have this CSS code:

<style>
     body {
     position:absolute;
     background-image: url(art/c11.jpg);
     width:100%;
     height:100%;
     }
</style>

As I read on the net, I expected this to resize the background image and place it in the browser window.

But no. I think I'm obviously doing something wrong (I don't know enough CSS). Any tips?

UPDATE:

I add a hole example (doesn't work):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No Title</title>
<style type="text/css">
     body {
     position:absolute;
     background-image:url(art/c11.jpg);
     background-size:100%;
     background-repeat: no-repeat;
     width:100%;
     height:100%;
     }
</style>
</head>
<body >
</body>
</html>
+3
source share
5 answers

If you are going to make this work a cross-browser, you better place the image on the page, and then wrap all your content in a DIV, which will be on top. For instance.

CSS

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#content {
  position: relative;
  z-index: 1;
}

If you plan to support IE6, add this snippet:

<!--[if IE 6]>
  <style type="text/css">
    html {
      overflow-y: hidden;
    }

    body {
      overflow-y: auto;
    }

    #background {
      position:absolute;
      z-index:-1;
    }

    #content {
      position:static;
    }
  </style>
<![endif]-->

HTML

<img id="background" src="art/c11.jpg" alt="" />

<div id="content">
  Your content
</div>

Code in action.

+2
source

add the background-repeat property.

:

     body {
     position:absolute;
     background-image: url(art/c11.jpg);
     background-size:100%;
     background-repeat: no-repeat;
     width:100%;
     height:100%;
     }
+6

, CSS. background-position, background-attachment background-repeat.

- JavaScript, z-index backgournd,

+2

css3, ,

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

ie9 +. ie7 ie8.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
+2

CSS3 background-size:100%, . , . , , , . , / , . , , .

+1

Source: https://habr.com/ru/post/1755424/

More articles:


All Articles