how to make Background color transparent [duplicate]










0















This question already has an answer here:



  • How do I give text or an image a transparent background using CSS?

    28 answers



How can i make a background color partially transparent with css, i want to have the background color partially showing the background image thanks.enter image description here



<div id="border101"> 
<center><img src="img/logo.jpg" height="120px"></center>
<hr>
<p style="background-color: white; font-size: 20px;" align="left">
Welcome to cryptofreeonline.ga we have many site in different formats.
We made this site with some basic help from the owners over at
<a href="blackccgen.ga">Blackccgen</a>
</p>
</div>


#border101
border: 10px solid silver;
margin-left: 100px;
margin-right: 100px;
border-radius: 30px 30px 30px 30px;
margin-top:30px;
height: 650px;
background-color: #C64CD5;










share|improve this question















marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Nov 11 at 9:32


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.














  • they use background-image what do you mean background color partially?
    – לבני מלכה
    Nov 11 at 6:12










  • i want background color to show as well as be able to see the image through it kinda like a tinted window
    – Richard Cooper
    Nov 11 at 6:14










  • any idea how to do that
    – Richard Cooper
    Nov 11 at 6:16










  • Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
    – quant
    Nov 11 at 6:21










  • @RichardCooper that what you mean?jsfiddle.net/7k8tshLy
    – לבני מלכה
    Nov 11 at 6:28















0















This question already has an answer here:



  • How do I give text or an image a transparent background using CSS?

    28 answers



How can i make a background color partially transparent with css, i want to have the background color partially showing the background image thanks.enter image description here



<div id="border101"> 
<center><img src="img/logo.jpg" height="120px"></center>
<hr>
<p style="background-color: white; font-size: 20px;" align="left">
Welcome to cryptofreeonline.ga we have many site in different formats.
We made this site with some basic help from the owners over at
<a href="blackccgen.ga">Blackccgen</a>
</p>
</div>


#border101
border: 10px solid silver;
margin-left: 100px;
margin-right: 100px;
border-radius: 30px 30px 30px 30px;
margin-top:30px;
height: 650px;
background-color: #C64CD5;










share|improve this question















marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Nov 11 at 9:32


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.














  • they use background-image what do you mean background color partially?
    – לבני מלכה
    Nov 11 at 6:12










  • i want background color to show as well as be able to see the image through it kinda like a tinted window
    – Richard Cooper
    Nov 11 at 6:14










  • any idea how to do that
    – Richard Cooper
    Nov 11 at 6:16










  • Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
    – quant
    Nov 11 at 6:21










  • @RichardCooper that what you mean?jsfiddle.net/7k8tshLy
    – לבני מלכה
    Nov 11 at 6:28













0












0








0








This question already has an answer here:



  • How do I give text or an image a transparent background using CSS?

    28 answers



How can i make a background color partially transparent with css, i want to have the background color partially showing the background image thanks.enter image description here



<div id="border101"> 
<center><img src="img/logo.jpg" height="120px"></center>
<hr>
<p style="background-color: white; font-size: 20px;" align="left">
Welcome to cryptofreeonline.ga we have many site in different formats.
We made this site with some basic help from the owners over at
<a href="blackccgen.ga">Blackccgen</a>
</p>
</div>


#border101
border: 10px solid silver;
margin-left: 100px;
margin-right: 100px;
border-radius: 30px 30px 30px 30px;
margin-top:30px;
height: 650px;
background-color: #C64CD5;










share|improve this question
















This question already has an answer here:



  • How do I give text or an image a transparent background using CSS?

    28 answers



How can i make a background color partially transparent with css, i want to have the background color partially showing the background image thanks.enter image description here



<div id="border101"> 
<center><img src="img/logo.jpg" height="120px"></center>
<hr>
<p style="background-color: white; font-size: 20px;" align="left">
Welcome to cryptofreeonline.ga we have many site in different formats.
We made this site with some basic help from the owners over at
<a href="blackccgen.ga">Blackccgen</a>
</p>
</div>


#border101
border: 10px solid silver;
margin-left: 100px;
margin-right: 100px;
border-radius: 30px 30px 30px 30px;
margin-top:30px;
height: 650px;
background-color: #C64CD5;





This question already has an answer here:



  • How do I give text or an image a transparent background using CSS?

    28 answers







css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 11 at 6:27









DPS

491212




491212










asked Nov 11 at 6:11









Richard Cooper

14




14




marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Nov 11 at 9:32


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.






marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function()
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();

);
);
);
Nov 11 at 9:32


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.













  • they use background-image what do you mean background color partially?
    – לבני מלכה
    Nov 11 at 6:12










  • i want background color to show as well as be able to see the image through it kinda like a tinted window
    – Richard Cooper
    Nov 11 at 6:14










  • any idea how to do that
    – Richard Cooper
    Nov 11 at 6:16










  • Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
    – quant
    Nov 11 at 6:21










  • @RichardCooper that what you mean?jsfiddle.net/7k8tshLy
    – לבני מלכה
    Nov 11 at 6:28
















  • they use background-image what do you mean background color partially?
    – לבני מלכה
    Nov 11 at 6:12










  • i want background color to show as well as be able to see the image through it kinda like a tinted window
    – Richard Cooper
    Nov 11 at 6:14










  • any idea how to do that
    – Richard Cooper
    Nov 11 at 6:16










  • Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
    – quant
    Nov 11 at 6:21










  • @RichardCooper that what you mean?jsfiddle.net/7k8tshLy
    – לבני מלכה
    Nov 11 at 6:28















they use background-image what do you mean background color partially?
– לבני מלכה
Nov 11 at 6:12




they use background-image what do you mean background color partially?
– לבני מלכה
Nov 11 at 6:12












i want background color to show as well as be able to see the image through it kinda like a tinted window
– Richard Cooper
Nov 11 at 6:14




i want background color to show as well as be able to see the image through it kinda like a tinted window
– Richard Cooper
Nov 11 at 6:14












any idea how to do that
– Richard Cooper
Nov 11 at 6:16




any idea how to do that
– Richard Cooper
Nov 11 at 6:16












Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
– quant
Nov 11 at 6:21




Please don't post image descriptions only. Always copy / paste your full code so that the code becomes searchable and your question stays useless in case the image link gets removed. Further reading meta.stackoverflow.com/questions/374700/…
– quant
Nov 11 at 6:21












@RichardCooper that what you mean?jsfiddle.net/7k8tshLy
– לבני מלכה
Nov 11 at 6:28




@RichardCooper that what you mean?jsfiddle.net/7k8tshLy
– לבני מלכה
Nov 11 at 6:28












2 Answers
2






active

oldest

votes


















1














Set opacity to background by using rgba (a is the opacity)



I convert the hex color to rgb using:https://www.w3schools.com/colors/colors_converter.asp






#border101 
border: 10px solid silver;
margin-left: 100px;
margin-right: 100px;
border-radius: 30px 30px 30px 30px;
margin-top:30px; height: 650px;
background-color: rgba(198, 76, 213,0.5);

<div id="border101"> 
<center><img src="img/logo.jpg" height="120px"></center>
<hr>
<p style="background-color: white; font-size: 20px;" align="left">
Welcome to cryptofreeonline.ga we have many site in different formats.
We made this site with some basic help from the owners over at
<a href="blackccgen.ga">Blackccgen</a>
</p>
</div>








share|improve this answer




























    0














    use this color



    background-color:#ff341140;


    last two number in color code is for transparency here is 40






    share|improve this answer



























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      1














      Set opacity to background by using rgba (a is the opacity)



      I convert the hex color to rgb using:https://www.w3schools.com/colors/colors_converter.asp






      #border101 
      border: 10px solid silver;
      margin-left: 100px;
      margin-right: 100px;
      border-radius: 30px 30px 30px 30px;
      margin-top:30px; height: 650px;
      background-color: rgba(198, 76, 213,0.5);

      <div id="border101"> 
      <center><img src="img/logo.jpg" height="120px"></center>
      <hr>
      <p style="background-color: white; font-size: 20px;" align="left">
      Welcome to cryptofreeonline.ga we have many site in different formats.
      We made this site with some basic help from the owners over at
      <a href="blackccgen.ga">Blackccgen</a>
      </p>
      </div>








      share|improve this answer

























        1














        Set opacity to background by using rgba (a is the opacity)



        I convert the hex color to rgb using:https://www.w3schools.com/colors/colors_converter.asp






        #border101 
        border: 10px solid silver;
        margin-left: 100px;
        margin-right: 100px;
        border-radius: 30px 30px 30px 30px;
        margin-top:30px; height: 650px;
        background-color: rgba(198, 76, 213,0.5);

        <div id="border101"> 
        <center><img src="img/logo.jpg" height="120px"></center>
        <hr>
        <p style="background-color: white; font-size: 20px;" align="left">
        Welcome to cryptofreeonline.ga we have many site in different formats.
        We made this site with some basic help from the owners over at
        <a href="blackccgen.ga">Blackccgen</a>
        </p>
        </div>








        share|improve this answer























          1












          1








          1






          Set opacity to background by using rgba (a is the opacity)



          I convert the hex color to rgb using:https://www.w3schools.com/colors/colors_converter.asp






          #border101 
          border: 10px solid silver;
          margin-left: 100px;
          margin-right: 100px;
          border-radius: 30px 30px 30px 30px;
          margin-top:30px; height: 650px;
          background-color: rgba(198, 76, 213,0.5);

          <div id="border101"> 
          <center><img src="img/logo.jpg" height="120px"></center>
          <hr>
          <p style="background-color: white; font-size: 20px;" align="left">
          Welcome to cryptofreeonline.ga we have many site in different formats.
          We made this site with some basic help from the owners over at
          <a href="blackccgen.ga">Blackccgen</a>
          </p>
          </div>








          share|improve this answer












          Set opacity to background by using rgba (a is the opacity)



          I convert the hex color to rgb using:https://www.w3schools.com/colors/colors_converter.asp






          #border101 
          border: 10px solid silver;
          margin-left: 100px;
          margin-right: 100px;
          border-radius: 30px 30px 30px 30px;
          margin-top:30px; height: 650px;
          background-color: rgba(198, 76, 213,0.5);

          <div id="border101"> 
          <center><img src="img/logo.jpg" height="120px"></center>
          <hr>
          <p style="background-color: white; font-size: 20px;" align="left">
          Welcome to cryptofreeonline.ga we have many site in different formats.
          We made this site with some basic help from the owners over at
          <a href="blackccgen.ga">Blackccgen</a>
          </p>
          </div>








          #border101 
          border: 10px solid silver;
          margin-left: 100px;
          margin-right: 100px;
          border-radius: 30px 30px 30px 30px;
          margin-top:30px; height: 650px;
          background-color: rgba(198, 76, 213,0.5);

          <div id="border101"> 
          <center><img src="img/logo.jpg" height="120px"></center>
          <hr>
          <p style="background-color: white; font-size: 20px;" align="left">
          Welcome to cryptofreeonline.ga we have many site in different formats.
          We made this site with some basic help from the owners over at
          <a href="blackccgen.ga">Blackccgen</a>
          </p>
          </div>





          #border101 
          border: 10px solid silver;
          margin-left: 100px;
          margin-right: 100px;
          border-radius: 30px 30px 30px 30px;
          margin-top:30px; height: 650px;
          background-color: rgba(198, 76, 213,0.5);

          <div id="border101"> 
          <center><img src="img/logo.jpg" height="120px"></center>
          <hr>
          <p style="background-color: white; font-size: 20px;" align="left">
          Welcome to cryptofreeonline.ga we have many site in different formats.
          We made this site with some basic help from the owners over at
          <a href="blackccgen.ga">Blackccgen</a>
          </p>
          </div>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 11 at 6:32









          לבני מלכה

          9,1061525




          9,1061525























              0














              use this color



              background-color:#ff341140;


              last two number in color code is for transparency here is 40






              share|improve this answer

























                0














                use this color



                background-color:#ff341140;


                last two number in color code is for transparency here is 40






                share|improve this answer























                  0












                  0








                  0






                  use this color



                  background-color:#ff341140;


                  last two number in color code is for transparency here is 40






                  share|improve this answer












                  use this color



                  background-color:#ff341140;


                  last two number in color code is for transparency here is 40







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 11 at 9:07









                  shaghayegh sheykholeslami

                  1837




                  1837













                      Popular posts from this blog

                      How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

                      Darth Vader #20

                      Ondo