Joomla Templates Club 406,261 posts

[freissmann Developer freissmannJoin date: February 2011Posts: 294Downloads:0Uploads:71 Thanks: 79 Thanked: 29 times in 1 posts]

#191434

We want to position “grey steps” as an image within navhelper position. There are two problems we do face:

a) Where is referring css file located (.ja-navhelper) and what’s the correct css statement?

.ja-navhelper { background: url("/images/layout/steps.PNG"); background-position: bottom; }

b) Background image is not resizing when switching to other screen resolutions

Any ideas how to achieve this? (dev site can be found here)

Thanks in advance.
Frank

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#509194

I believe what you need to do is make your background image responsive to/for different screen resolutions.

Here are some helpful resources for how to achieve responsive images in CSS . . . .

http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/

http://www.shutterstock.com/blog/2013/05/how-to-use-responsive-images-to-make-your-site-shine-on-any-platform

http://webdesign.about.com/od/css3tutorials/a/browser-size-cover.htm

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#509290

Hi Frank,

My below solution will help you to find it

1) .ja-navhelper

Open templates/ja_brisk/less/navigation.less file

Find and see it


.ja-navhelper {
background: lighten @grayDarker,5%);
color: @gray;
}


2) Background image will be automatically resized

Open templates/ja_brisk/less/style.less file

Add new script

@media (max-width: 767px) {
.ja-masshead h3 {
font-size: 2.333em !important;
width: auto !important;
}
}

Regards

[Author]

Posts