Background image transparency

Question

I am just wondering if there is a way to change the transparency for a background image in a css file, so the nav bar and the header elements get clearer. One way i thought about is by using linear-gradient and change the alpha value for opacity. It didn't look as good as i expected.

CSS code:

header{

background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, .4)),
              url(../Images/main.jpg);
background-size:cover;
height: 910px;
background-position: center;
overflow: auto;

}

Answer 1 · 2019-02-23T00:04:29Z

February 23, 2019 12:04am

What a sweet thing to say! But for most questions, I'd suggest giving the community as a whole at least a day to respond as folks drop in at different times from all over the world.

It's not clear from this code what your text is like, does it cover the entire header, or just a bit at the top? And what color is it? If it's dark, or the default black, dimming the image as done here is probably not helpful. But you could lighten it a bit. For instance, if your text is only in the upper area you might do something like this with the gradient to fade the top:

header {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0)),
                    url(../Images/main.jpg);

Another thing you can do to make the text stand out on an image is to give it a "stroke" of the opposite color. Since not all browsers have this function, it's usually better to simulate it using shadows. For example, here's a white lining that would help dark text stand out over an image:

h1 {
  text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
}

If that doesn't steer you in the right direction, try posting the rest of the code (both CSS and HTML) so we can get a more complete look at it. And post a link to the photo, or at least describe what the photo looks like.

Answer 2 · 2019-02-22T23:07:48Z

February 22, 2019 11:07pm

Steven Parker , I might need your skills, sorry for bothering you, but you seems like you are kind and not to mention knowledgeable :)

Answer 3 · 2019-02-23T00:29:04Z

February 23, 2019 12:29am

''' html

<!DOCTYPE html>

<meta charset="UTF-8">
<title>My Resume</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="CSS/Style.css">

</head>

<body>

<nav>

    <ul>


        <li ><a href="#">Home</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>
</nav>

<article>

 <p>My name is Omar Bahaa, I turned 29 this year. I was originally graduated from Arab Academy for Science and Technology and Maritime Transport, Navigation department "I agree it's a long name for a university :D" <br>I started learning how to code last September and it was very challenging as i had no prior knowledge whatsoever. I started watching videos, read articles and even buying books but it was a total mess. <br> Until one day i decided to take a Web-development course in the Russian Culture Institute in Dokki, Egypt. I started to understand the basics of how websites and web application get built but i still was not ready for applying for a job as a developer.<br> After a month of research on internet for bootcamps. I decided to subscribe to Team Treehouse instead. To be honest i was totally surprised as i started to get more knowledgeable everyday, as they depend on practicing and workshops to apply what you've learned which helped me to have this knowledge stuck in my brain.</p>


</article>
 </header>  


<main>


</main>

<footer><small>&copy; OB Cooperation</small></footer>

</body> </html>

'''

''' CSS

*{ box-sizing: border-box; } body{ margin: 0; padding: 0; line-height: 1.5; background: rgba(0,0,0,.9) }

header{

/* background-image:linear-gradient(#ffa949, transparent 50%), url(../Images/main.jpg);/ background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, .4)), url(../Images/main.jpg); background-size:cover; height: 910px; background-position: center; / border: 2px solid blue;*/ overflow: auto;

}

header p{ width: 25%; clear: both; float: left; margin-top:10px; overflow: auto; color: #323C46;

} header p:hover{ color: rgba(255,0, 0, 0.5); font-size: 16.3px; }

header img{ width: 120px; height: 120px; border-radius: 50%; border: 4px solid #323C46; margin-top: -30px; float: left; margin-left:30px }

h1{ color: green; text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white; }

article{

padding-bottom: 20px;

/* border: 2px solid green; / / Border for debugging*/ text-align: center;

}

nav ul li a{ text-decoration: none; }

nav ul{ list-style: none; text-align: center; background: black; padding: 10px 0 10px 0; margin-top: 100px; /* border: 2px solid red; / / Border for debugging*/

}

nav ul li { font-weight: bold; display: inline; border-left: 2px solid grey; padding: 5px 10px 5px 10px; font-size: 20px;

}

nav ul li:first-child{ border: none; }

footer{ background-color: black; border-bottom: 5px solid darkgrey;

} small:hover{ color: white; } '''

Answer 4 · 2019-02-23T01:35:07Z

February 23, 2019 1:35am

Sorry my bad.

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>My Resume</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="CSS/Style.css">

</head>

<body>

<header>

    <nav>

        <ul>


            <li ><a href="#">Home</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
    </nav>

    <article>
<img src="Images/own.jpg" alt="My picture">    

     <p>My name is Omar Bahaa, I turned 29 this year. I was originally graduated from Arab Academy for Science and Technology and Maritime Transport, Navigation department "I agree it's a long name for a university :D" <br>I started learning how to code last September and it was very challenging as i had no prior knowledge whatsoever. I started watching videos, read articles and even buying books but it was a total mess. <br> Until one day i decided to take a Web-development course in the Russian Culture Institute in Dokki, Egypt. I started to understand the basics of how websites and web application get built but i still was not ready for applying for a job as a developer.<br> After a month of research on internet for bootcamps. I decided to subscribe to Team Treehouse instead. To be honest i was totally surprised as i started to get more knowledgeable everyday, as they depend on practicing and workshops to apply what you've learned which helped me to have this knowledge stuck in my brain.</p>


    </article>
     </header>  


    <main>


    </main>

    <footer><small>&copy; OB Cooperation</small></footer>


</body>
</html>

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    line-height: 1.5;
    background: rgba(0,0,0,.9)
}

header{

/*    background-image:linear-gradient(#ffa949, transparent 50%), url(../Images/main.jpg);*/
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, .4)),
                  url(../Images/main.jpg);
    background-size:cover;
    height: 910px;
    background-position: center;
/*    border: 2px solid blue;*/
    overflow: auto;


}

header p{
    width: 25%;
    clear: both;
    float: left;
    margin-top:10px;
    overflow: auto;
    color: #323C46;

}
header p:hover{
    color: rgba(255,0,  0, 0.5);
    font-size: 16.3px;
}

header img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #323C46;
    margin-top: -30px;
    float: left;
    margin-left:30px
}

h1{
    color: green;
      text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 0 white;
}

article{

    padding-bottom: 20px;
/*    border: 2px solid green; */
    /*    Border for debugging*/
    text-align: center;

}

nav ul li a{
    text-decoration: none;
}

nav ul{
    list-style:  none;
    text-align: center;
    background: black;
    padding: 10px 0 10px 0;
    margin-top: 100px;
/*    border: 2px solid red; */
    /*    Border for debugging*/

}

nav ul li {
    font-weight: bold;
        display: inline;
    border-left: 2px solid grey;
    padding: 5px 10px 5px 10px;
    font-size: 20px;

}

nav ul li:first-child{
    border: none;
}

footer{
    background-color: black;
    border-bottom: 5px solid darkgrey;

}
small:hover{
    color: white;
}

Answer 5 · 2019-02-23T02:24:28Z

February 23, 2019 2:24am

Steven Parker, Actually sky blue looks great!! However i might need to use @media for lower displays like tablet and phones to change the layout.

Answer 6 · 2019-02-23T11:21:26Z

February 23, 2019 11:21am

Thank you Steven Parker for helping me out, much appreciated.

Welcome to the Treehouse Community

Looking to learn something new?

Omar Bahaa

Omar Bahaa

Background image transparency

6 Answers

Steven Parker

Steven Parker

Omar Bahaa

Omar Bahaa

Steven Parker

Steven Parker

Omar Bahaa

Omar Bahaa

Omar Bahaa

Omar Bahaa

Omar Bahaa

Omar Bahaa

Steven Parker

Steven Parker

Omar Bahaa

Omar Bahaa

Omar Bahaa

Omar Bahaa

Omar Bahaa

Omar Bahaa