CSS Container Background - Printable Version

CSS Container Background - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: CSS Container Background (/showthread.php?tid=5670837)

CSS Container Background - ɕıɴɢıϵ - Jul 16, 2017

So I attempted to make the container background transparent, but it does not want to cooperate.. Any ideas?

Spoiler (Click to View)

CSS

Code 
* {

  color: white;

  background-image: url("armory.gif");

  background-size: cover;

}

.centerContainer {

  width: 1000px;

  margin-left: auto;

  margin-right: auto;

  background:transparent;

}

HTML

Code 
<link rel="stylesheet" href="style.css" type="text/css" />

  </head>

  <body>

    <div class="centerContainer">

      <div id="quoteText">Order of Khaos Members</div>

      <div id="divider"></div>

      <div id="membersList" class="scrollbar">

    Gingie<br>

        Knightro<br>

    Lil Poison

      </div>

    </div>

* - Owl - Jul 16, 2017

Where in the page are you referring to? Your screenshot shows the container is already transparent.

* - Nachfolger - Jul 16, 2017

Make sure your CSS isn't cached. Try using:

Code 
background: rgba(0,0,0,0);

* - Rushax - Jul 16, 2017

You're using it from this site aren't you?
https://money.team/
The code is exactly the same.

The CSS for the container is being made up of the background image from:

Code 
background-image: url("armory.gif");

If you take that out, then it will have a blank white background, is that what you're after?

== EDIT:
I think I know what you're saying.

The code for is referring to all elements.

Code
*{ background-image: url("armory.gif"); }
This is making all elements have a background-image of that image.

Change that line out of the CSS element and put it to the body like so:

Code 
body{

background-image: url("armory.gif");

}

Then the background color will show for the elements. This problem is caused by background-image having priority over showing a background-color.

Made a quick JSFiddle here:
https://jsfiddle.net/x7o4kp05/3/

* - ɕıɴɢıϵ - Jul 16, 2017

(Jul 16, 2017 10:58 AM)Rushax Wrote: You're using it from this site aren't you?
https://money.team/
The code is exactly the same.

The CSS for the container is being made up of the background image from:

Code
background-image: url("armory.gif");

If you take that out, then it will have a blank white background, is that what you're after?

== EDIT:
I think I know what you're saying.

The code for is referring to all elements.

Code
*{ background-image: url("armory.gif"); }
This is making all elements have a background-image of that image.

Change that line out of the CSS element and put it to the body like so:

Code
body{ background-image: url("armory.gif"); }

Then the background color will show for the elements. This problem is caused by background-image having priority over showing a background-color.

Made a quick JSFiddle here:
https://jsfiddle.net/x7o4kp05/3/

You are amazing <3 Thank you!