Joomla Templates Club 406,261 posts

[mortenrasmussen Friend mortenrasmussenJoin date: October 2010Posts: 78Downloads:0Uploads:19 Thanks: 11 Thanked: 5 times in 1 posts]

#194647

I have tried taming the css and classes but it seams that it is all forced in width by the over all container.

Is it possible to have an image background in full 100% width of the screen? Maybe create a new zone/area with a background image or something like that?

Kind regards, Morten

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#522041

Hi

In this file /templates/ja_bookshop/css/off-canvas.css

.t3-wrapper {
background: ADD HERE YOUR IMAGE URL; background. url( link to your image)
position: relative;
left: 0;
z-index: 99;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
overflow: visible;
}

[dohdaiga Friend dohdaigaJoin date: April 2013Posts: 43Downloads:203Uploads:5 Thanks: 12]

#522042

Hi

Try using this in your main body tag…

body {
background-image: url(yourimage.ext); /* .jpg,.png. .gif … your choise */
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFF /* change to any color you wish*/
background-size: cover;
text-align: center; /* OPTIONAL – alight your text as you please */
}

[mortenrasmussen Friend mortenrasmussenJoin date: October 2010Posts: 78Downloads:0Uploads:19 Thanks: 11 Thanked: 5 times in 1 posts]

#522044

Thanks. Both are great suggestions.

I’m sorry that I did not mention that it is not an image for the entire site background I need. What I would like to do is to have an area/position e.g like in Appolio where the image background is 100% width and it is possible to have modules in front.

I know this might be too much customization of the template so for now its just a question if it would be possible at all.

Thanks and best regards, Morten

[dohdaiga Friend dohdaigaJoin date: April 2013Posts: 43Downloads:203Uploads:5 Thanks: 12]

#522046

I would suggest that you insert the css into the MAIN class or Div which concerns the module. That should do the trick. Let me know if that works

class {
background-image: url(yourimage.ext); /* .jpg,.png. .gif … your choise */
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFF /* change to any color you wish*/
background-size: cover;
text-align: center; /* OPTIONAL – alight your text as you please */
}

[mortenrasmussen Friend mortenrasmussenJoin date: October 2010Posts: 78Downloads:0Uploads:19 Thanks: 11 Thanked: 5 times in 1 posts]

#522048

Where should I put the class – in which css file?

[dohdaiga Friend dohdaigaJoin date: April 2013Posts: 43Downloads:203Uploads:5 Thanks: 12]

#522051

I wont really know but i guess your template.css or layout.css
You might have to do some digging… if you are not sure you can try using “inspect element” in firefox…you just need to right click on the module you want to modify, check the last option at the bottom. That should show you the module’s css info…

[mortenrasmussen Friend mortenrasmussenJoin date: October 2010Posts: 78Downloads:0Uploads:19 Thanks: 11 Thanked: 5 times in 1 posts]

#522061

I tried your suggestion but the background image is still inside of the container area and not in 100% width of the screen.

[dohdaiga Friend dohdaigaJoin date: April 2013Posts: 43Downloads:203Uploads:5 Thanks: 12]

#522088

which template is this ? and which module is it?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#522091

Hi mortenrasmussen

Could you apply the changes i suggested above ?

[Author]

Posts