CODEWITHSUNDEEP
csswordpress
Dave Hudson
Dave Hudson

Reputation: 53

full page background within Wordpress

I'm working on a wordpress site and the client has requested that one page in particular has an edge to edge background image.

Can anyone offer a solution that would allow me to apply a full screen background image to a single page within the wp site? Would developing a wordpress page template do the trick?

Cheers

Upvotes: 0

Views: 89

Answers (4)

Ian
Ian

Reputation: 3336

The easiest way to do this would be to use CSS to target that specific page.

Each page rendered in WordPress outputs specific classes to the body tag. For example on my blog this would be my body

<body class="page page-id-952 page-child parent-pageid-950 page-template page-template-page_full-php">

Notice the the class page-id-952. This is unique to this page only. I can then create a style for this:

body.page-id-952{ background:url('path/to/image.png'); }

For your specific case, take a look at the class that's being rendered out in the body tag for that page (it will be different than in this example), and style accordingly.

Check out this fiddle file to see it in action.

NOTE: If you're building your theme from scratch, add this to your body tag to generate the classes. Hopefully if you're using a base theme, it's already included. Check out the codex for detailed info on body_class()

<body <?php body_class(); ?> >

Upvotes: 1

Dave Hudson
Dave Hudson

Reputation: 53

My php isnt as good as youd hope but could conditional tags specify an alternate css file which adds a background image to html?

Upvotes: 0

Will Thresher
Will Thresher

Reputation: 109

This is a great article by Chris Coyier from css-tricks.com, I used the code below today actually. Apply the class to the image you'd like to be expanded. You may have to tweak the positioning section of the css. http://css-tricks.com/perfect-full-page-background-image/

img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

Upvotes: 0

javigs
javigs

Reputation: 51

you can use CSS to custom only one page, using body style class key postid or page-id, etc. It may be different depending on the theme.

Then, adds an entry in your custom css using your background image.

Good luck!

Upvotes: 0

Related Questions