Background wont display and tab opacity

Question

I am making a website that has three tabs and I want the tabs to be displayed over the background image as a grey box with roughly 25% opacity. my problem is that i don't know how to do this & my background image will not display at all. I am very new to programming so it may just be a stupid error on my part, any help is appreciated!

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e)  {
    var currentAttrValue = jQuery(this).attr('href');
    
    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
    
    // Change/remove current tab to active
    
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    
    e.preventDefault();
  });
});

body{
  background-image: url("Artwork/Login.jpg");
}

/*TABS INFO*/
.tabs {
  width:100%;
  display:inline-block;
}

/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
  display:block;
  clear:both;
  content:'';
}

.tab-links li {
  margin:0px 5px;
  float:left;
  list-style:none;
}

.tab-links a {
  padding:9px 15px;
  display:inline-block;
  border-radius:0px 0px 5px 5px;
  background:#7FB5DA;
  font-size:16px;
  font-weight:600;
  color:#4c4c4c;
  transition:all linear 0.15s;
}

.tab-links a:hover {
  background:#a7cce5;
  text-decoration:none;
}

li.active a, li.active a:hover {
  background:#fff;
  color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
  padding:15px;
  border-radius:3px;
  box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
  background:#fff;
  background-color: rgba(255, 255, 255, .25);
}

.tab {
  display:none;
}

.tab.active {
  display:block;
}

<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
  <body>
    <div class="tabs">
      <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
      </ul>
      <div class="tab-content">
        <div id="tab1" class="tab active">
          this is a test
        </div>

        <div id="tab2" class="tab">
          this is a test
        </div>

        <div id="tab3" class="tab">
          this is a test
        </div>
      </div>
    </div>
</body>
<footer>
</footer>

I have tried changing file structure, renaming, and anything else that I can think of but like I said; I am new so I'm sort of stumbling around in the dark.

just to be clear.. are you trying to add a background to ".tab" or to body. and as i know you cant set opacity on a background image in css directly. you will have to do some trick to achieve it check below question http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity — shakee93, Nov 15 '15 at 19:50
What i am trying to do is treat the tabs as an overlay that are separate from the background with low opacity to still see the background through the tabs. — Akmedrah, Nov 15 '15 at 21:07

sodawillow · Accepted Answer · 2015-11-15T22:33:34.653

1

I'm pretty sure the starting / is unneeded here (if images are in an Artwork folder next to the HTML page) :

background: url("/Artwork/Login.jpg");

What have you tried about opacity ? There is no opacity property in the code.

EDIT :

Based on your comment, here is a way to have a white transparent background with opaque black text inside :

body {
  background-image: url("http://static3.depositphotos.com/1004423/181/i/950/depositphotos_1812868-Abstract-Rock-Background.jpg");
  background-size: cover;
}

.trans {
  background-color: rgba(255, 255, 255, .5);
  color: black;
  font-family: Arial;
  padding: .5em;
}

<div class="trans">here you go</div>

edited Nov 15 '15 at 22:33

answered Nov 15 '15 at 19:41

sodawillow

12,497
4
34
44

I removed the `/` and as for the opacity I was unaware about a way to do it so I googled around and couldn't find anything that worked so i left it out. – Akmedrah Nov 15 '15 at 21:09
What if you add `opacity: .5` to an item you wish to be tranparent ? – sodawillow Nov 15 '15 at 21:10
that made the whole thing faded. It would work and thank you for informing me of that. but what I'm really looking for is the tabs themselves to be a cloudy yet see through overlay of the background with the contents of the tabs remaining opaque. I'm unsure if this is doable. – Akmedrah Nov 15 '15 at 21:14
I have added an example for background opacity – sodawillow Nov 15 '15 at 21:20
so to apply that in the tab code I would ad another containing div around tab contents in the html? – Akmedrah Nov 15 '15 at 21:23
1

No, you don't need an extra element. Try adding `background-color: rgba(255, 255, 255, .5);` to `.tab-content` it will make the background white and half transparent. – sodawillow Nov 15 '15 at 21:25
Perfect Thank you VERY MUCH :) – Akmedrah Nov 15 '15 at 21:28
You can remove the `background` property which is useless now – sodawillow Nov 15 '15 at 21:36
Just one more question then I'm out of your hair. Based off my code above (changed to reflect your additions) do you see any reason that the background should not display? – Akmedrah Nov 15 '15 at 21:36
1

Try with the absolute (complete) URL of the image. I have edited your post to add a web snippet so you can see it here directy (waiting for the edit to be accepted). – sodawillow Nov 15 '15 at 21:42
Also, `footer` cannot be outside of the `body`, and you are using an old version of jQuery (but maybe you need to support old browsers). – sodawillow Nov 15 '15 at 21:47
Even with an absolute URL the image wont show up. I think that the tab formatting might be causing an error but I am unsure. – Akmedrah Nov 15 '15 at 22:26

Background wont display and tab opacity

1 Answers1