Public Forums 71,145 posts

[Giannis Maroulis Friend Giannis MaroulisJoin date: April 2006Posts: 124Downloads:101Uploads:30 Thanks: 57 Thanked: 16 times in 2 posts]

#171722

Hi to all,

I need Help to add in this three modules a background image like the screenshot 1 does anyone have the knowledge to help me accomplice this ????

The gradient image name is “module_bg.png”
i tried to insert the image but it displayed only in the headline

My frond page now is like this

Thanks in advanced

---

Attachments:

1. 
2. 

Giannis Maroulis

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#429319

Could you give me a link to your website?

[Giannis Maroulis Friend Giannis MaroulisJoin date: April 2006Posts: 124Downloads:101Uploads:30 Thanks: 57 Thanked: 16 times in 2 posts]

#429322

There it is

http://www.civitas.gr/demo🙂

I have change in the layout.css
the following line

.ja-box { float: left; overflow: hidden; }

with this one

.ja-box {
float: left;
background: url(../images/light-blue/module_bg.png) no-repeat !important;
overflow: hidden;
}

But now i have problem with, its not cover the module completely.
So my question is does i did it correctly and secondly how am i going to fix it???

Thanks

Giannis Maroulis

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#429327

You replace

.ja-box {
float: left;
background: url(../images/light-blue/module_bg.png) no-repeat !important;
overflow: hidden;
}
with

.ja-box {
float: left;
background: url(../images/light-blue/module_bg.png) no-repeat !important;
background-size:100% 100%;
overflow: hidden;
}

1 user says Thank You to khoand for this useful post

1. Giannis Maroulis

[Giannis Maroulis Friend Giannis MaroulisJoin date: April 2006Posts: 124Downloads:101Uploads:30 Thanks: 57 Thanked: 16 times in 2 posts]

#429328

Thanks a lot, but i still have problem with the style does not apply in the full length of the module the first module – content overflows and the third module – display a part of the background….

Any clue :confused:

Thanks again

Giannis Maroulis

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#429330

Code I gave you just use css3. So it’s not suite for you.
A way suite for you is that you must split your background into many pieces (at least 2 pieces: title and content) and apply them by css

[Giannis Maroulis Friend Giannis MaroulisJoin date: April 2006Posts: 124Downloads:101Uploads:30 Thanks: 57 Thanked: 16 times in 2 posts]

#429332

i insert this line also and the third module fixed but its not applying in the full length of content

.ja-box {
float: left;
height: 280px;
background: url(../images/light-blue/module_bg.png) no-repeat !important;
background-size:100% 100%;
overflow: hidden;
}

If its not a waste of time can you help with this??? i mean not help me spiting the image but help me in apply them in the css

Giannis Maroulis

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#429338

You restore

.ja-box { float: left; overflow: hidden; }
You add this code into /template/your_template/css/template.css

div.ja-moduletable h3, div.moduletable h3 {
background: #D8D9DA;
border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
}
.ja-box-ct.clearfix {
background: url(http://www.civitas.gr/demo/templates/ja_norite/images/light-blue/module_bg.png) no-repeat left bottom;
}
And you must cut module_bg.png picture, retain content color and increase height of picture.

1 user says Thank You to khoand for this useful post

1. Giannis Maroulis

[Author]

Posts