Background image for pages and posts

Home Forums Premium WordPress Themes Seasonal Pro Background image for pages and posts

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2817
    Angela Dunsire
    Participant

    is it possible to set a background image for all pages and posts?

    #2821
    ShapedPixels
    Keymaster

    Background for the overall page, content area or the sidebar column?

    #2824
    Angela Dunsire
    Participant

    The content area, see attached image

    Assuming that when you are referring to the overall page you mean the content area plus the sidebar column.

    Thanks.

    Attachments:
    #2827
    ShapedPixels
    Keymaster

    You would have to do some custom CSS to add a background image to your content area. The container you would target (apply) with the class for a background image is this:

    [code].content-area {}[/code]

    So if you are comfortable enough with some CSS coding, you could add a background photo. It also depends on if you want to have the same photo on every page or different ones. If different per page, then you need to create some CSS to relate to the page ID, something like this:

    [code].page-id-24 .content-area {}[/code]

    The page id is found on the tag of your source code.

    #2836
    Angela Dunsire
    Participant

    Brilliant! Thanks.

    #3230
    Holger Meinders
    Participant

    I would like this to, but i am a noob at programming. Could you give a compleet sample..

    Greetings Holger

    #3231
    ShapedPixels
    Keymaster

    @Holder….

    An example would be like this:

    First, upload your image to your WordPress media library and click on the edit to get the File URL (the link to the image location).

    Use a plugin like Simple Custom CSS (if you are not using a child theme or jetpack).

    Then, your custom CSS would be like this for a particular page:

    [code].page-id-24 .content-area {
    background-image: url(“http://www.yoursite.com/your-image.jpg”);
    background-size: cover;
    }[/code]

    Depending on the size of your image, the above code has a background-size: cover added which will fill the content area with your image (it stretches it in all directions to fill the area). More info about this can be found here:

    http://www.w3schools.com/cssref/css3_pr_background-size.asp

    As for the page id, you need to look at your page source code with your browser and look on the tag for the page id class. An example of what you would see is like this:

    The highlight blue part shows the page id class.

    Attachments:
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.