Public Forums 71,145 posts

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#187961

Hi

How can I make to adapt the background image to a responsive design?I want that when you resize the windows browser(more smaller),at certain resolution,the background image doesn’t show and you only see the “container”.

I refer something like this web http://www.joomlart.com/demo/#ja_mitius

Thanks

[tilovas Friend tilovasJoin date: February 2013Posts: 33Downloads:0Uploads:5 Thanks: 4 Thanked: 16 times in 9 posts]

#494694

Hi,

Need more info, what are you using, what template and etc (url of your site).
“Ja_mitius” is responsive template, this means that there is used different CSS descriptions for each resolution. So, you can change everything you want using the custom.css file. For eg. you can use codes for change the background for eath resolution.

Background code for “Default 940px grid” (wide). (code from Ja_mitius):


body {
background: url(/ja_mitius/templates/ja_mitius/images/body_bg.jpg) no-repeat center top #000
}


Use custom.css file and of course, url of your img.

And background code for “mobile” or “tablet” don’t make any changes, because by default there’s no img(depends on the template you are using). So when you resize the windows browser(more smaller),at certain resolution,the background image doesn’t show and you only see the “container”. If you want make some changes on this screens use codes for eg.:

@media (max-width: 767px) {
.container {
padding: 10px 10px;
}
.body {
background-color: beautiful;
}
}


GL!

1 user says Thank You to tilovas for this useful post

1. il_bujia

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#494697

Thanks for your reply.I’am working with T3 Quickstart for Joomla! 2.5,blank template.

The link to my web is testweb1.no-ip.biz,You have to click in the folder named CRIS.

[tilovas Friend tilovasJoin date: February 2013Posts: 33Downloads:0Uploads:5 Thanks: 4 Thanked: 16 times in 9 posts]

#494701

In your case you need use custom.css file and chanege not only “wide”(default params.) but and mobile or tablet. Use code for eg.:

@media (max-width: 767px) {
.body {
background: transparent;
}
}


This code for mobile.

1 user says Thank You to tilovas for this useful post

1. il_bujia

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#494704

Thanks again.This code is to paste in custom.css file?

[tilovas Friend tilovasJoin date: February 2013Posts: 33Downloads:0Uploads:5 Thanks: 4 Thanked: 16 times in 9 posts]

#494705

Yes, paste it in custom.css file

1 user says Thank You to tilovas for this useful post

1. il_bujia

[il_bujia Friend il_bujiaJoin date: May 2013Posts: 69Downloads:0Uploads:20 Thanks: 42 Thanked: 2 times in 1 posts]

#494706

Solved,thnaks again

[Author]

Posts