#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Kiev, Ukrain
    Posts
    89
    Rep Power
    2

    Static background in HTML5


    Hello i whant to create a static background for my site , using HTML5 . This i found on dev :
    background-image: url(1.jpg);
    background-attachment: fixed;
    and this works for scroll , but i want the same for ctrl+scroll
    how can i get that ? ctrl+scroll makes a matrix of bckg-pictures , when i use ctrl+ scroll .I thought that the only way , is to get/create a bigger picture , but hope there is something more.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    Nice question, today I learned about the background-size property.
    https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    I think "background-size: cover;" might be what you're looking for.

    Comments on this post

    • FAQer agrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    2
    Rep Power
    0

    happy shop


    I am now trying to add this background png to my html tag (some website suggested this over the body tag). The height of the image is 1000x1052. I am trying to make the background image scale to the size of the screen, so its like a liquid layout.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Location
    Kiev, Ukrain
    Posts
    89
    Rep Power
    2
    Thank you very much . This is the thing that i was looking for.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45
    Originally Posted by abramsalfie
    I am now trying to add this background png to my html tag (some website suggested this over the body tag). The height of the image is 1000x1052. I am trying to make the background image scale to the size of the screen, so its like a liquid layout.
    Add this to your head or stylesheet. The filter and ms-filter entries are the part that fix the "cover" method for IE.

    Code:
    html{		
    	background: url(image_name.png) no-repeat center center fixed; 
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image_name.png', sizingMethod='scale');
    	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image_name.png', sizingMethod='scale')";
    }

IMN logo majestic logo threadwatch logo seochat tools logo