We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (5)

Resolved T3BS3 Template: How to add a background image to part of the frontpage

0
Votes
Undo
  1. Rasimo
    Rasimo
  2. General Discussion
  3. Monday, 13 October 2014
  4.  Subscribe via email
Hi everyone,

Using the great new T3BS3 template, I would like to add a background image to the part of the frontpage that (in the demo) says: “Welcome to T3 The all new, modern and flexible framework from JoomlArt.”. So the image should NOT cover the whole background. It should only fill the width of the page on that part or box on the frontpage.

I’ve tried re-defining the jumbotron masthead class in a custom.css file (with the line “background-image: url(‘myimage.jpg’);” in it), but this has no effect.

I am not sure how to do this. Any help would be much appreciated!
Comment
There are no comments made yet.
Responses (5)
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rasimo,

So you want to have background image for a module? Could you please add the full CSS rule that you added to custom.css file ?

In that css rule “background-image: url(‘myimage.jpg’);” what folder you put the image to ? Please check if the path to the image is correct or not.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Rasimo
Rasimo
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Gardner,

Thanks for your quick reply. Could be that the code or path is wrong, but I am also aiming for a bigger area than the module position.

Please see the attached screenshot. The green + blue areas are where I want the background image to appear. It seems to me that the module position itself is smaller, so I adding the background image to the module won’t get the result I am looking for.

I created a custom.css and put:
.jumbotron.masthead {
background-image: url(“images/mypath/myimage.jpg”);
}

Thanks in advance for any suggestions.
Attachments (1)
screenshot.jpg screenshot.jpg
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi again,

Your CSS rule is correct. I am not sure why it does not work properly, could you please share your site url (or pm me), I will check in your site. Please turn on the development mode so that I can detect easier.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Rasimo
Rasimo
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks again Gardner,

Meanwhile, I solved the problem. I put some more code in custom.css and changed the image path a little. This code works:

.jumbotron.masthead {

background-image: url(/images/mypath/myimage.jpg);

background-repeat: no-repeat;
background-size:100%;

width:100%;

margin-left: auto;

margin-right: auto;

}

Thanks for your support!

Rasimo
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Good job @Rasimo. Please let me know if you have any further problem.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.