Joomla Templates Club 406,261 posts

[cyberrick13 Friend cyberrick13Join date: November 2015Posts: 51Downloads:205Uploads:9]

#977284

How do I change the background image in the Hero module?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#977343

Hi you can change it from css file . Kindly find the suggestion give here to change the hero image.https://www.joomlart.com/forums/topic/hero-unit-backround-image-problem/#post-497015
Look for the background image in the suggestion.

[cyberrick13 Friend cyberrick13Join date: November 2015Posts: 51Downloads:205Uploads:9]

#977727

Here’s what I see in the css file –

.hero-unit {
margin: 59px 0 0;
padding: 0;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.hero-unit .container {
padding: 140px 0 30px;
}
.hero-unit .hero-unit {
padding: 0;
margin: 0;
}
.hero-unit h1 {
font-weight: bold;
margin-bottom: 30px;
}
.hero-unit p {
font-size: 24px;
margin-bottom: 30px;
padding: 0 150px;
}
.hero-unit p.btn_unit {
margin-bottom: 0;
}
.hero-unit .btn {
border: 0;
color: #fff;
font-weight: bold;
padding: 15px 40px;
text-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.hero-unit .btn-primary {
background: #f7682c;
margin-bottom: 40px;
}
.hero-unit .btn-primary:hover {
background: #e74b09;
color: #fff;
text-shadow: none;
}
.hero-unit a.arrow-down {
background: url(../../../images/arrow-down.png) no-repeat left top;
display: inline-block;
height: 40px;
font-weight: bold;
text-indent: -999em;
width: 40px;
}
.hero-unit a.arrow-down:hover {
background-position: left bottom;

I don’t see the same as in the example post you referred me to. The example post refers to header-bg.jpg image but I don’t have that in the above anywhere

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#977849

Hi

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

If your Theme is different then open that theme folder and find the same code

.hero-unit {
background: url

Replace the image path with your image path.

[Author]

Posts