How to set background color to transparent in this situation ? - CSS-Tricks

This topic is empty.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
August 23, 2013 at 9:00 am #147951

Minouch
Participant

Hello

I have a unique situation in which i didn’t manage to set background color for some css blocks into transparent! It works with some blocks and doesn’t work for others. With firebug, i managed to set transparency to some, here is my try in custom.css file. I want all the blocks to become transparent so the background page should always appear when visitor scroll down. To see it yourself, please download this zip, extract it and open Meet the team.html, than go to folder and open custom.css file.

PS : In the portions when the transparency work, i comment “It work” and in portions when it didn’t work i comment “Not work”. The zip file with the page in question

Thank you for reading.

August 23, 2013 at 9:23 am #147954

Senff
Participant

If you want people to help out, you should make it as easy as possible for them. Not many people will want to download files, install/configure them on their own machine, before they can look into the problem.

Set up a site where the problem occurs so people can check that out, or create a use case in Codepen to demonstrate the problem.

August 23, 2013 at 10:32 am #147959

Minouch
Participant

Hi; i am working on localhost and i promess that this zip file didn’t require any install or configuration. I did save the page witch have the issue in that zip file with its css and javascript files associated to it. So just open Meet the team.html to see what i am talking about.

August 23, 2013 at 11:04 am #147961

Minouch
Participant

Hi; okay. The page i am talking about is : http://bambootheme.com/showcase/onepage/ Sections in middle and bottom of page don’t let me set its background to transparent! For example for …

I tried: #grid2wrap {background:transparent;} .clearfix {background:transparent;} but didn’t work. I use firebug for that.

August 23, 2013 at 11:34 am #147962

Senff
Participant

All the backgrounds are white on that page, why do they need to be transparent?

If the page background is white, and a section that’s on that page has a transparent background, then it will obviously be showing white as well.

August 23, 2013 at 11:48 am #147964

Minouch
Participant

I want them to be transparent, because i need to set a background image to fit entire page, so sections colors should not remain white for the background image to show up.
Regards

August 23, 2013 at 11:52 am #147965
Senff
Participant
If you give a SECTION a transparent background color, it will show the background color of the parent element(s). So if you have this:
```
<body>   <--- background has image
   <div id="gradient">     <--- background is white
      <section id="grid1wrap">    <--- background is transparent
```
Then the SECTION will have no background and it will show the background color of #gradient….which is white. The background color of #gradient obscures the background image of the body.
August 23, 2013 at 12:13 pm #147967

Minouch
Participant

It is true what you said, now some blocks get tranparent. But for some others it remain hard to guess. For example this block : < nav id=”navwrap” class=”affix” data-offset-top=”200″ data-spy=”affix” > … < / nav > I tried :

.zen-container { background: transparent; }

.view-featured { background: transparent;}

topcolour {background: transparent; }

navwrap {background: transparent; }

.affix { background: transparent; }

Won’t change to transparent, and keep getting white. By passing, i did what you mention, i already done a background image to see where it is not transparent yet, in the zip file i already done it. Thank you.

August 23, 2013 at 8:04 pm #147982

Senff
Participant

All those elements still have a white background because they’re contained in an element has a white background.
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘CSS’ is closed to new topics and replies.