CODEWITHSUNDEEP
htmlcssimagebackgroundbackground-image
user1103744
user1103744

Reputation: 2461

Placement of 2 images as the background on one body

Dear visitors stackoverflow!

I can not solve a simple problem: Body given the background of the picture "1.jpg" (it is automatically pressed against the header), I still need to put a picture - "2.jpg" to be pressed on the contrary to the footer. That is, I need some "rubber layout" in height, so that images were sliding when the height of the page is large, and would come when the content is not enough. I would be happy to link a working example (not even a demo, but just a site that I myself look the source code), but at least I would be grateful for the usual suggestions and ideas! Thank you in advance.

Sorry for bad English, I tried to write competently.

update:

Thank you very much for your answers. Do not pay attention to what I chose only one, you helped me and I thank you all!

Upvotes: 1

Views: 716

Answers (3)

w3uiguru
w3uiguru

Reputation: 5895

Put you image 1.jpg in body background using css and 2.jpg in background of footer.

I dont know what are the sizes of your images so You can see the below link to get some help -

http://css-tricks.com/snippets/css/fixed-footer/

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Upvotes: 3

Probocop
Probocop

Reputation: 10552

For full browser support, I'd have one image set on the <body>, and then another image set on a site container, e.g. <div id="site">

HTML

<html>
  <head>
    <title>Title!</title>
  </head>
<body>
  <div id="site">
    [Your website here]
  </div>
</body>

CSS

body {background: url(img/image-1.jpg) top no-repeat;}
#site {background: url(img/image-2.jpg) bottom no-repeat;}

Upvotes: 1

Greg
Greg

Reputation: 21909

You can achieve this with CSS3:

body {
    background: url("1.jpg") top left,
        url("2.jpg") bottom right;
}

If you require support for older browsers (See here for current support), you will have to use an tag for the second image.

Upvotes: 2

Related Questions