Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • evans885 Friend
    #188459

    I recently edited the text in the customer html section of the hero unit module, and immediately began having an issue with the formatting of the background image (also the color of the h1 text changed also?). Instead of the bg image stretching to the width and height of the page, there is now a white margin surrounding the entire image. Why would this happen?

    Ninja Lead Moderator
    #496850

    You can try this way

    Step1:

    Step2:


    1. custom_html_1
    2. custom_html_2
    evans885 Friend
    #496876

    Thanks for the input. However, the problem doesn’t seem to lie within the custom html code. It seems like somehow a .css file was modified and changed the formatting for the background picture (and the color of the h1 text). Is this correct?

    Ninja Lead Moderator
    #497015

    Because as you mentioned before posting the problem with background image when you edited text in the customer html. In custom html module, it includes html code and css style appear within it, that for reason i asked you switch it to toggle editor.

    Can you tell me which the problem you are still facing?

    This is html script appear “Hero Unit” module


    <div class="hero-unit">
    <h1>bib·lic·al stew·ard·ship :</h1>
    <p>The act of creatively and responsibly managing God's creation according to his command.</p>
    <p><a class="btn btn-primary btn-large btn-tpl-1" href="index.php?Itemid=101#get_in_touch">Drop us a line...</a></p>
    <p class="btn_unit"><a class="arrow-down img-circle" href="index.php?Itemid=101#our_services">Arrow down</a></p>
    </div>

    and css style

    Open templates/ja_onepage/css/themes/modern/template.css file


    .hero-unit {
    background: url(../../../images/themes/modern/header_bg.jpg) no-repeat left top;
    background-size: cover;
    }

    With image path: templates/ja_onepage/images/themes/modern/header_bg.jpg

    evans885 Friend
    #497068

    Thanks again for the reply. The main issue I am having is with the background image. I can’t figure out how to make it fit the whole width of the browser. Instead, I get the background pic with a large white margin around it. Not sure why it happened in the first place, but even less sure on how to fix it. If for some reason the style sheet was changed, I’m not sure where to find the code to change it back.

    In the template.css file, the code says “background-size: cover” which to me would indicate that the image should “cover” the entire width and height of the module/browser, like it was originally. Instead I get this:

    Notice the white space on the left and right sides of the background image, as well as above, between the image and the menu bar. Any help would be great!


    1. Capture
    Ninja Lead Moderator
    #497117

    Now, I understand what you expect. I have added “ hero-unit section1” in the “Hero Unit” module, see the screenshot.

    Please check it in the front-end site


    1. miss_css_class
    evans885 Friend
    #498278

    Thank you so much

Viewing 7 posts - 1 through 7 (of 7 total)

This topic contains 7 replies, has 2 voices, and was last updated by  evans885 10 years, 8 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum