Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by brevans26
brevans26
15,198 Points

Gradient-Linear not working properly

Hi friends! I am currently in the Front End Development track and decided to create a simple website after taking the HTML and CSS Basics courses. I am having trouble to apply a transparent gradient to these columns (Natural and Urban Attractions). The original columns have images as background.(https://imgur.com/RTD9da0)

When I apply the gradient shown in the code below, both image and gradient are disappearing (https://imgur.com/OCnMx7B). What am I doing wrong?

Here is the CSS file,

.natural {
    background: linear-gradient(firebrick, transparent 95%)
                #5F4514 url('PirenopolisProject/cachoeira.jpg') no-repeat;
    background-size: cover;
    border-radius: 10px;
    float: left;

}

.urban {
    background: linear-gradient(firebrick, transparent 95%)
                #5F4514 url('PirenopolisProject/igrejarefined.jpg') no-repeat;
    background-size: cover;
    border-bottom: 10px;
    border-radius: 10px;
    float: right;

}

.natural,
.urban {

    width: 45%;
    padding: 15px;
}

Here is the HTML file for this section:

<div class="group"> 
        <section class="natural attractions">
        <h3 class="subtitulos">Natural Attactions</h3>
            <p> Located at the edge of the Pyrenean Mountains, Pirenópolis is favored by exuberant nature, where its hills are covered by the purest savannah called <em>Cerrado</em> in Brazil, countless clear waterfalls in places of stunning beauty.<br>
            The Serra dos Pireneus is a continental watershed: on one side is the Paraná Basin and on the other, the Tocantins Basin. The rocky formations of this mountain range are all quartizitic, which gives its waters a clear coloration of low salinity. Waters that sprout on rocky grounds rich in pure, crystalline quartz.<br>
            Visit to the following waterfalls, or <em>cachoeiras</em> in Portuguese, are mandatory:</p>
                <ul>
                    <li><a href="https://pt.wikipedia.org/wiki/Cachoeira_do_Abade" target="_blank">Cachoeira do Abade</a></li>
                    <li><a href="http://cachoeiradorosario.com.br/" target="_blank">Cachoeira do Rosário</a></li>
                    <li><a href="http://cachoeirasdosdragoes.blogspot.com/" target="_blank">Cachoeira Pérola do Dragão</a></li>
                </ul>
         </section>
       <section class="urban attractions">
        <h3 class="subtitulos">Urban Attractions</h3>
        <p> Listed as a historical heritage, the small metropolitan Pirenópolis still maintains the 18th century   mansions, churches and museums nestled on streets of quartzite stones which lead to the clear <em>Rio       das Almas</em> (River of the Souls, in English).<br>
             Pirenópolis became an important economic center in the early eighteenth century and it still mantains its architecture well preserved. 
             Baroque architecture of the city has an irregular outline, of Colonial influence, adapting in an organic   way to the curves of the terrain and being influenced by religious architecture.<br>
            When visiting Pirenópolis do not forget to visit the following venues:</p>
        <ul>
          <li><a href="https://tinyurl.com/ycwpuwsw" target="_blank">Igreja Matriz de Nossa Senhora do Rosário</a></li>
          <li><a href="https://tinyurl.com/y7usxcsm" target="_blank">Igreja de Nosso Senhor do Bonfim</a></li>
          <li><a href="https://tinyurl.com/yatu4gjj" target="_blank">Teatro de Pirenópolis</a></li>
        </ul>
    </section>
     </div>

Thanks!

2 Answers

Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

use this validator you have two syntax errors: https://jigsaw.w3.org/css-validator/#validate_by_input

.natural - Value Error : background url('PirenopolisProject/cachoeira.jpg') is not a background value : linear-gradient(firebrick, transparent 95%) #5F4514 url('PirenopolisProject/cachoeira.jpg') no-repeat

If you trying to create multiple backgrounds this is the syntax (add ",")

.myclass {
  background: background1, background 2, ..., backgroundN;
}
brevans26
brevans26
15,198 Points
brevans26
brevans26
15,198 Points

Thank you Ezra!

Can'e believe I was just forgetting to put a "," to separate the different backgrounds. Here it is the result: https://imgur.com/a/CVmdq

Decided to apply a radial gradient and I am still experimenting different options.

Thanks!