Resize background-image by html5 and css3

Question

In this forum i read that i need to use JQ to resize background-image. but i don't know JQ and want to resize background-image by css3. Can i do it? If possible show me the right direction, please.

I have two background images. One - texture with repeat (i don't want to scale it), And another one - below - whole picture (this one i don't want to repeat and want to resize when site change resolution (for ex on small screens).

    body { 
     padding-top: 60px; 
     padding-bottom: 40px;
     background-color:#ededed;
     background-image:url('http://b.pusku.com/wp-content/uploads/2012/11/textura5.png'), url('http://b.pusku.com/wp-content/uploads/2012/11/fone1.jpg'); 
}

thank you! but i cant understand how i can select only one image in code. these examples have only one image — Lucky
– Lucky, Commented Jan 18, 2013 at 14:38
give the image a class and style it that way. <img class="classname" > and in your css, put .classname { /* styles for the image here */ } — ashley
– ashley, Commented Jan 18, 2013 at 14:40
The second link is for two background images, ie something like background-size: 2em 2em, 100% 100%; — gotohales
– gotohales, Commented Jan 18, 2013 at 14:44

gotohales · Accepted Answer · 2013-01-18 15:08:20Z

3

Here is an example. The 40% 20% section is the size for the first image, the 20% 15% is for the second image. The repeat rules then specify that the first image doesn't repeat and the second does.

 body { 
     padding-top: 60px; 
     padding-bottom: 40px;
     background-color:#ededed;
     background-image:url('http://upload.wikimedia.org/wikipedia/commons/c/cb/Fighting_kittens-1340.jpg'), url('http://thepersiankittens.com/Persian_Kittens.jpg'); 
     height: 1000px;
     width: 400px;
     background-size: 40% 20%, 20% 15%;
      background-repeat: no-repeat, repeat;
    }

Here is an example that you can play around with http://jsbin.com/ojudel/1/edit

Change the percentages and you will see how it works. More information can be found here.

edited Jan 18, 2013 at 15:08

answered Jan 18, 2013 at 14:59

gotohales

3,7151 gold badge23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lucky Over a year ago

Thank you very for all answers! I tried all examples and in my case this - 2em 2em, 100% 100% - working good! I see that i need to learn more about this css3 rules and i will play with jsbin more. Only one things i couldnt do - save proportions for background pic in my fluid layout.

gotohales Over a year ago

@Lucky You should be able to get it to work one way or another, using auto as a size, but then responsive bit is another thing entirely :)

Lucky Over a year ago

Mookamafoob, thank you very much for answers! I will play with auto in my fluid layout:)

Collectives™ on Stack Overflow

Resize background-image by html5 and css3

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related