WordPress.org

Ready to get started?Download WordPress

Forums

Custom Post Background
making images full screen (12 posts)

  1. dills
    Member
    Posted 3 years ago #

    I am using the latest custom post back ground and would like to get the background image to adapt to any browser sizing, i have tried some css I can not get it correct. Please help my site is looking rough on large monitors and safari. Thank you

    http://henrydills.com/?page_id=55

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    The only way to can do this is to have the background repeating - both on the x and y axis.

  3. dills
    Member
    Posted 3 years ago #

    Is there a CSS trick I have been working with the bellow code but can not get it correct

    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;
    }

    @media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.bg {
    left: 50%;
    margin-left: -512px; /* 50% */
    }
    }

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    That won't work. Background images do not have dimensions and cannot be styled using an img tag.

  5. dills
    Member
    Posted 3 years ago #

    What if i write it more like this

    html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

  6. esmi
    Forum Moderator
    Posted 3 years ago #

    The only way to can do this is to have the background repeating - both on the x and y axis.

  7. flashbuddy
    Member
    Posted 2 years ago #

    Me thinks dills is looking for something like:

    http://css-tricks.com/3458-perfect-full-page-background-image/

  8. primaveranz
    Member
    Posted 2 years ago #

    Has anyone managed to use the technique linked to in FlashBuddy's post successfully in WordPress?

    I have tried putting the CSS2 example code into e.g. the Sidebar.php and the Style.css and it does appear OK, but the image seems to sit on a layer on top of the rest of the page, so no links are clickable.

    I would like to have a non-scrolling background covering the entire page.

    Thanks.

  9. flashbuddy
    Member
    Posted 2 years ago #

  10. primaveranz
    Member
    Posted 2 years ago #

    Thanks for the quick reply Flashbuddy, I will give it a try!

  11. piccobello
    Member
    Posted 2 years ago #

    It seems like dills solved his problem.
    Could somebody point out the solution?

  12. piccobello
    Member
    Posted 2 years ago #

    YEAH, I found the solution for having a fullscreen image with ratio, simply put this into the custom field:

    background-position: center top;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic