Tagged: , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 14, 2015 at 6:55 am #458888
    elliotstiller

    Using scmjf.org–

    My goal is to make it so that the background image of the header area… does not repeat. I do not want the black leaves part of the image to repeat, because it make it difficult to read the menu text.

    If i click the option “do not repeat” then the background image is VERY small and centered, with white space abundant on the left and right.

    Rather, I would prefer for the background image to take up the entire space of the header area without repeating.

    Is there any solution? This is a significant problem; ENFOLD should allow one to upload a solid background image that fills up the entire space.

    SCMJF.org

    Please help

    Elliot
    3108809038

    June 14, 2015 at 4:26 pm #458947
    Yigit

    Hi elliotstiller!

    You can add following code to Quick CSS in Enfold theme options under General Styling tab

    .header_color .header_bg {
  background-repeat: no-repeat;
  background-size: cover;
}

    But since the background image you uploaded is not big enough, image will be blurry. Please upload a bigger background image.

    Best regards,
    Yigit

    June 15, 2015 at 6:23 am #459102
    elliotstiller

    I did what you said and the part that was captured was zoomed in and blurry. I want the entire image to be displayed in the header area, even if its just a little blurry; I just want the whole image to be there, from the leaves on the top to the clouds on the bottom.

    You said that the image is blurry, because its not big enough. I uploaded the same image, scaled really huge, like 2000 width and 1000 height;

    — I also uploaded very very small edition of the same image.

    The same result happend for the very large, very small, and the original image: the picture was zoomed in and blurry.

    Thank you for trying to help please let me know if you have any advice

    June 17, 2015 at 6:29 pm #460903
    Andy

    Hi!

    if it does not work for you, you might need to add an !important into Yigit’s code:

    .header_color .header_bg {
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

    However, I can see that the background image you are using is very small (370x183px):

    Please regenerate your thumbnails and clear browser cache.

    Best regards,
    Andy

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.