Joomla Templates Club 406,261 posts

[kella@youngerusa.com Friend kella@youngerusa.comJoin date: January 2016Posts: 65Downloads:46Uploads:23 Thanks: 9]

#868239

I would like to have this image (see link below) cover the blue on both the left and right. I have the image set as a background image in the masshead position of the default layout.

This picture shows hero style 1 in full-screen. It also looks the same way when I create a Call-To-Action module.

Can anyone help me figure out what I’m doing wrong here?

http://screencast.com/t/dVXdUIqs

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

#868482

Hi,

How can I see the screenshot of you mention above? I checked that under the service page but I could not see the background image. If possible, you can add the background image and give me the link, I will check and help you out.

Regards

[kella@youngerusa.com Friend kella@youngerusa.comJoin date: January 2016Posts: 65Downloads:46Uploads:23 Thanks: 9]

#868857

I have attached the background image here. I’m sorry about that.

---

Attachments:

1. 

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

#869405

I checked the URLyou provided and that url is using other template not the Uber template.

You can give me the URL of the site running Uber template and besides that, you need to add the image to Call-To-Action module, I will check that and help you to show a full-width image on your site.

[kella@youngerusa.com Friend kella@youngerusa.comJoin date: January 2016Posts: 65Downloads:46Uploads:23 Thanks: 9]

#869760

Hello,

I am sorry for the wrong URL. It is youngerusa.com/j3new

I was experiencing this problem even when it was set to a call-to-action module.

However, since then I have installed the Music test site and it seems to be working fine. I am not sure what the problem was, but I am no longer experiencing it.

Thank you for you help!

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

#870278

As I can that image background shows fully under Hero Style-1 module on your site. Is that fine now?

[kella@youngerusa.com Friend kella@youngerusa.comJoin date: January 2016Posts: 65Downloads:46Uploads:23 Thanks: 9]

#871671

I changed the position of the module. When it is in masshead position, it is cut on both ends. It seems to do this when I have anything in the masshead position so I am not using that position.

It is now in the acm header position and it shows full screen.

[kella@youngerusa.com Friend kella@youngerusa.comJoin date: January 2016Posts: 65Downloads:46Uploads:23 Thanks: 9]

#871673

What size image should I use for a background image in the Uber modules? I have noticed that the size of the image doesn’t shrink to fit the screen so it leaves my backgrounds looking messy. Sometimes the full image doesn’t show up and sometimes the text overlaps the images. I have put some images below.

I would like to create background images that I can be sure will look nice on any size screen. Can anyone help?

1st image is the one I am using as a background
2nd image is hero style 6 showing that my image was blown up so big that you can’t see much of it at all
3rd image is call-to-action style 3 and you can see that the text goes right over my background image. I would like to be able to design my backgrounds in a way so they will not have text over the important pictures.

All of these examples are in the ACM header position.

domain: youngerusa.com/j3new

---

Attachments:

1. 
2. 
3. 

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

#873229

Try to use my solution below

Create templates/uber/css/custom.css file and add new rule

.acm-hero {
    background-size: cover !important;
}

[kella@youngerusa.com Friend kella@youngerusa.comJoin date: January 2016Posts: 65Downloads:46Uploads:23 Thanks: 9]

#873715

Should I already have a templates/uber/css/custom.css file? I cannot find it. I have added an image of the files in this folder.

If I need to add the file, do I need to use dreamweaver to do it?

---

Attachments:

1. 

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

#874124

Any template built with T3 framework will support ‘custom.css’ file to hold all custom css code on your site but by default, this file doesn’t exist and you need to create it.

Or just download my attached file and unzip > copy to your site in above directory.

---

Attachments:

1. custom.css_.zip

[kella@youngerusa.com Friend kella@youngerusa.comJoin date: January 2016Posts: 65Downloads:46Uploads:23 Thanks: 9]

#874410

Thank you, that seems to have helped a little. As you can see the new image I posted below is again hero 6 but now with the custom.css file in place.

However, I am hoping that I can have the text and buttons stay in the same place when the screen gets smaller. This way it looks the same on all computer screens (I don’t care if the mobile screens are different, but at least all computer screens should be the same). See the second image for how it presents on a smaller computer screen.

---

Attachments:

1. 
2. 

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

#875150

Try to change this way

Open templates/uber/css/custom.css file

find and change

.acm-hero {
    background-size: cover !important;
}

to

@media screen and (max-width: 767px) {
    .acm-hero {
        background-size: 100% !important;
    }   
}
@media  (min-width: 1200px) {
    .acm-hero {
        background-size: cover !important;
    }
}
@media screen and (min-width: 992px) {
    .acm-hero {
        background-size: cover !important;  
    }
}

[kella@youngerusa.com Friend kella@youngerusa.comJoin date: January 2016Posts: 65Downloads:46Uploads:23 Thanks: 9]

#875463

I tried it but still no luck

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

#876051

I will forward that problem to the development team for further checking. You can give me admin login and FTP account of your site via your reply and set as private reply

[Author]

Posts