Background and website transparency

[gregcatmull]

Hi,

please see my attached screenshot for ref.

I know that I can use a background image for my website but can I remove all white behind the elements of my page so that I can see the background through the elements?

hopefully the attached helps.

cheers
Greg
http://shop.garsons.co.uk

[Kyle – SUPPORT]

Hi

Please add this to your custom css:

.boxed-layout {
  background: none repeat scroll 0 0 transparent;
  margin: 0 auto;
  width: 1000px;
}
#main-container, .tm-toggle-button-wrap a {
  background-color: transparent;
}
.page-shadow .boxed-layout {
  box-shadow: none;
}

– Kyle

[gregcatmull]

almost, although it seems to make the framework width less.

cuts off 10% of page on both sides. is there also a way to make the header background transparent?

cheers
Greg

[gregcatmull]

sorted it I changed the width to 1200px. cheers for that.

can I make the header background transparent too?

cheers
Greg

[Kyle – SUPPORT]

So you don’t want your image background anymore?

– Kyle

[gregcatmull]

Basically i have a header image made which is white with a 10% transparency so that you can see the background through it, however when i add this image url to the css it goes to solid white? I guess this is because there is a white standard background colour which this image sits over?

let me know

cheers
Greg

[Kyle – SUPPORT]

Please can you apply the CSS above so that I can see what’s left to remove?

– Kyle

[gregcatmull]

I have done that, I have also notice that this has upset my mobile responsiveness.

cheers
Greg

[Kyle – SUPPORT]

Sorry the CSS should be:

.boxed-layout {
  background: none repeat scroll 0 0 transparent;
}
#main-container, .tm-toggle-button-wrap a {
  background-color: transparent;
}
.page-shadow .boxed-layout {
  box-shadow: none;
}

– Kyle

[Kyle – SUPPORT]

For the header add this:

#header-section:before, #mini-header {
  background: transparent;
}
.header-shadow #header-section:before {
  box-shadow: none;
}

– Kyle

[gregcatmull]

this works thanks. is there away just the header being transparent and not the whole website now. ive tried taken out you first bit of css to see if that works but when I do that I make the header go back to block and not transparent.

[Kyle – SUPPORT]

Unfortunately not sorry, the background of the whole page is from the .boxed-layout, as this is behind the header, if you make the header transparent you will still have a white header as the -boxed-content is behind it

– Kyle