WordPress.org

Ready to get started?Download WordPress

Forums

Simple Catch Theme - how to change header background image from tiled effect . (9 posts)

  1. shahnaz
    Member
    Posted 9 months ago #

    Hi I am using a child theme on the simple catch theme to do customizations.

    I wanted to change the header background image.
    I added the following code to custom CSS

    #header {
    background:url(http://www.recipesaresimple.com/wp-content/uploads/2013/05/grass.jpg) ;
    }

    since the image in the url above is a default background image theres not problem when it is tiled.

    However for other images when i added the code as follows;

    #header {
    background:url(http://www.recipesaresimple.com/wp-content/uploads/2013/02/Serving_soup-e1369699212825.jpg) ;
    }

    ;the image gets tiled and is not providing the desired result.
    Please help me to get the image to just be a single image that fills the header background space excluding the slider image.

    My site is: http://www.recipesaresimple.com

    Thanks in advance!

  2. LittleBigThing
    Member
    Posted 9 months ago #

    #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).

  3. shahnaz
    Member
    Posted 9 months ago #

    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.

  4. shahnaz
    Member
    Posted 9 months ago #

    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?

  5. LittleBigThing
    Member
    Posted 9 months ago #


  6. LittleBigThing
    Member
    Posted 9 months ago #

    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...

  7. LittleBigThing
    Member
    Posted 9 months ago #

    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...

  8. shahnaz
    Member
    Posted 9 months ago #

    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.

  9. zoiladisla
    Member
    Posted 4 weeks ago #

    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.

Reply

You must log in to post.

About this Topic