3 Replies - 765 Views - Last Post: 26 October 2013 - 10:50 AM

#1 samasama  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-October 13

add image as a background to index page only?

Posted 16 October 2013 - 02:17 PM


How i can add image as a background to index page only?

Do i need css?

Is This A Good Question/Topic? 0
  • +

Replies To: add image as a background to index page only?

#2 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6058
  • View blog
  • Posts: 23,496
  • Joined: 23-August 08

Re: add image as a background to index page only?

Posted 16 October 2013 - 02:20 PM

Not a PHP question, moved.
Was This Post Helpful? 0
  • +
  • -

#3 DblAAssassin  Icon User is offline

  • D.I.C Head

Reputation: 31
  • View blog
  • Posts: 247
  • Joined: 11-May 13

Re: add image as a background to index page only?

Posted 16 October 2013 - 05:33 PM

Yes, you add a background in css by doing...
body {
    background-image: url('dog.jpg');
}



**EDIT**
Beware, the image is repeated to fill the whole background, if the image is not large enough.

This post has been edited by DblAAssassin: 16 October 2013 - 05:36 PM

Was This Post Helpful? 0
  • +
  • -

#4 Berret  Icon User is offline

  • New D.I.C Head

Reputation: 7
  • View blog
  • Posts: 16
  • Joined: 26-October 13

Re: add image as a background to index page only?

Posted 26 October 2013 - 10:50 AM

JackOfAllTrades gave a basic example of a background image in CSS, and his syntax is of course correct. You can also use the background shorthand property to have all of the background properties on one line. Here is the basic format:

background: color url(url) attachment position repeat;

Color is the background-color property, url(url) is the background-image property, attachment is the background-attachment property, position is the background-position property, and repeat is the background-repeat property. I'm not going to go into the specifics of each one right here, which would take a while, but I'll give an example code to showcase some of them, going along with JackOfAllTrades' code:

body {
     background: black url(dog.jpg) scroll top left no-repeat;
}



The above code creates a black background and places the dog.jpg file in the top-left of the body element, doesn't tile, and the image scrolls up and down the screen along with the document. That's just one example of what you can do with background images.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1