-
AuthorPosts
-
June 24, 2013 at 2:19 pm #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 ModeratorNinja Lead
- Join date:
- November 2014
- Posts:
- 16064
- Downloads:
- 310
- Uploads:
- 2864
- Thanks:
- 341
- Thanked:
- 3854 times in 3563 posts
June 25, 2013 at 8:59 am #496850You can try this way
Step1:
Step2:
-
June 25, 2013 at 11:07 am #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 ModeratorNinja Lead
- Join date:
- November 2014
- Posts:
- 16064
- Downloads:
- 310
- Uploads:
- 2864
- Thanks:
- 341
- Thanked:
- 3854 times in 3563 posts
June 26, 2013 at 10:10 am #497015Because 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
June 27, 2013 at 12:49 am #497068Thanks 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!
Ninja Lead ModeratorNinja Lead
- Join date:
- November 2014
- Posts:
- 16064
- Downloads:
- 310
- Uploads:
- 2864
- Thanks:
- 341
- Thanked:
- 3854 times in 3563 posts
June 27, 2013 at 7:56 am #497117Now, 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 user says Thank You to Ninja Lead for this useful post
July 8, 2013 at 12:38 pm #498278Thank you so much
AuthorPostsViewing 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
Jump to forum