Jump to content
Regman7

How do I create a background image for a specific page

Recommended Posts

Trying to modify this for different pages using page ID. Working well for the site, but I need to have different backgrounds on different pages.

body {
  background-image: url("paper.gif");
}

New to this and could use some help making it work.

 

Thanks to anyone.

Share this post


Link to post
Share on other sites

You can put a unique class name on the <body> element of each page and have one CSS rule for each one. The other alternative is to load a page-specific stylesheet on each page, each stylesheet having a different body{} rule.

Share this post


Link to post
Share on other sites

Thanks for the reply. I could use all of the help I can get. Here is what I am trying at the moment:

 

body {
    background: url(IMAGE LINK) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body.page-id-172:before {
    background-image: url(IMAGE LINK);
}

 

The top (body { background is working fine. The body.page-id-XXX{  before IS NOT.

Share this post


Link to post
Share on other sites

using :before means you have to use content: "" property to create a type of textual element, then you have to define a area to fill, either dimensions for itself, or its parent that it will appear just inside (.page-id-172 classed element)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...