Hero BG Image

codenamewilson

I've uploaded an image in the HERO module for a background image. But it does not fill out the entire blue area. It shows smaller than it should as well. How do I make the background image span the entire blue field? (behind the main menu, logo and intro text heading?)

Ninja

codenamewilson
Hi
The Hero position use container size by default.
Open template style Layout options > edit Hero section > set the container width to Fluid.
save and check.
Here is option :

codenamewilson

This does not work as your pic shows. My default doesn't show HERO. Only the Home does. but when i switch to home and change it, it breaks more.

codenamewilson

The top loses the background color... when i change it.

codenamewilson

Ninja

codenamewilson
Hi
Kindly do not make bump posts, use all content in one reply.
For not showing images issue, kindly edit fields in first post and submit a temp super super user login for staff. I will check it on your site.
By default the demo use half image on the left side.

codenamewilson

ok. I was only replying for more info to share. i'm uploading the site so someone can access it.

Ninja

codenamewilson
Yes once you put the site online, kindly submit the login info in edit fields and let us know with a reply here.

Regards

codenamewilson

done thank you. Can you explain the fix when its solved? I have 3 more sites with this template to produce.

Ninja

codenamewilson hi
I will update here once changes done. It take some time as module not allow this change with design

codenamewilson

When I add this image in the hero module as the main image, it shows only in full desktop view. Then when i shrink to mobile it disapears. So I'm trying to find a background css solution and find a solution that allows the hero display image to show in all sizes too

Ninja

codenamewilson

codenamewilson So I'm trying to find a background css solution

Hi
I do not see the same image on your site? The top module is feature intro module and only use the Image for right side view as in the demo site.
The changes need to be customize for the layout file in template folder/acm/feature-intro/tmpl/style-1 php

use this code in custom css

#t4-header + #t4-hero > div {
    padding-right: 0px;
    padding-top: 130px;
    padding-left: 0px;
}
.acm-features.style-1 .features-image {
    right: 0%;
}

codenamewilson

thank you. ive made all changes offline. i will update online server asap.
I got a background image solution that works but the LESS keeps over writing the code since i need to disable 10-101.css line of code. I made it work but cannot figure out how to keep less from overwriting my changes.

Ninja

codenamewilson
Hi
This change you need to add inside custom css option in the template only. No need to make change in less file.

codenamewilson

it doesn't work for me. I updated the admin info for access. It seems so simple, but the background stays blue

I still have the problem with the main HERO graphic not scaling down to mobile sizes. It disapears once its not desktop view too. It shrinks with the browser a little, then gone. I think these 2 are my last issues.

Ninja

codenamewilson
Hi
The code i shared is working on side based on first topic.
You can use this code in custom css to make it 100%


.acm-features.style-1 .features-image img, .acm-features.style-1 .features-image { width:100%}

codenamewilson

for some reason the transparent background isn't working again.
I know you went into it and made it work for me.
But when I loaded the custom SCSS editor in the template, it gives an error when I try to save and now reverted back to the blue background showing rather than being transparent.

even though it still shows the code present.

parse error: failed at !important; /hermes/bosnacweb05/bosnacweb05am/b916/ipw.rvoltcom/public_html/dragonshoard/templates/ja_educatsy/local/scss/custom.scss on line 2, at column 28

Ninja

codenamewilson
Hi
Please make sure you adding it in custom css not custom scss