Support » Themes and Templates » Simple Catch Theme – how to change header background image from tiled effect .

Viewing 8 replies - 1 through 8 (of 8 total)
  • #header {
    background: url(http://www.recipesaresimple.com/wp-content/uploads/2013/02/Serving_soup-e1369699212825.jpg);
    background-repeat: no-repeat;
    background-position: center;
    }

    Try using the right size image. Otherwise you could add the following to the above code:
    background-size: contain;
    or
    background-size: cover;
    This latter is a CSS3 property so it doesn’t work with older browsers (more information).

    Thankyou! It has worked! had to play around with my images.
    Trying to figure out how to make it work without using
    background-size: cover; as you specified it wont be supported by older browsers.

    i have tried resizing the image with no effect.. so what is the workaround to have the image displayed all across the header without a gap on the left and right sides?

    I noticed the image loads slowly since it is way too large (> 3 Mb). You should definitely make it smaller, anyway you will set up your header. You could try height = 477 px and width = 1072 px (crop first to the right width and cut pieces to get the right height, I suggest). This size would fit the center of the header in older browsers.

    I think using the above image size would give a good result in most (also older) browsers:

    #header {
    background-color: #fff;
    background-image: url(http://www.recipesaresimple.com/wp-content/uploads/2013/02/Serving_soup-e1369699212825.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }

    I hope it works…

    Sorry about the empty post above, some delay in processing and some re-thinking made me change it, but I couldn’t delete it anymore…

    thank you for taking time for this,
    i have resized the image through word press >dashboard> edit media>scale image

    it now has the following size:
    Dimensions: 1072 × 713
    unable to change height to 477 px as it effects proportionality.

    i entered code as follows;

    #header {
    background-color: #fff;
    background-image: url(http://www.recipesaresimple.com/wp-content/uploads/2013/07/choccake.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    }

    however i believe in internet explorer it appears that the header image is zoomed out to show only a portion of it, although it does span across the width of the page.
    (i am unable to check ie browser myself-had a friend check)
    i do prefer this to the prior result.

    I cannot seem to get a tiled header, no matter what I do. Nor can I change a tile background with pictures that came with the theme to place the pictures I have in my gallery.

    The theme I have is Rive_Theme. I want it just like the one in the demo, but no luck. The author of the theme instructed me to get the documentation and to import other file, which I have no clue to do.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Simple Catch Theme – how to change header background image from tiled effect .’ is closed to new replies.