CODEWITHSUNDEEP
htmlcss
deniz
deniz

Reputation: 11

Background Colour Being Overridden

I am trying to create a transparent image text over an image.

I was able to display the transparent image text, but noticed that one of the background colours is being overridden after using the "Inspect" tool.

The following shows this happening: overridden background color

The following is the source code inside the HTML file:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{% static 'styles/city.css' %}" type="text/css"/>
</head>
<body>
    <div class="container">
        <!--The required alt attribute specifies an alternate text
            for an image, if the image cannot be displayed.-->
        <img src="{% static '/images/buenos-aires-panorama.jpg' %}" alt="Buenos Aires Panorama"/>

        <div class="text-block">
            <h1 style="font-size: 2em; color: lightblue">Buenos Aires</h1>
            <br>
            <u>Faux Pas</u>
        </div>
    </div>
</body>
</html>

The name of the class inside the city.css file that is responsible for displaying the transparent image is the "text-block" class.

overridden image

By looking at the image of using the "Inspect" tool, we can see that the following line is crossed out which means that it is being overridden:

background: rgb(0, 0, 0);

Can someone please explain why this is being overridden? Thank you!

The following is the city.css file:

/*The following line will make sure that the black background
  and the image vertically align.*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
}

.container img {
    vertical-align: middle;
    background-size: cover;

    /*The height was set to "auto" in order to preserve the
      aspect ratio of the background image.*/
    height: auto;
    width: 100%;
}

.container .content {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    width: 350px;
    height: 100%;
    padding: 20px;
}

.text-block {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    padding: 20px;
}

u {
    font-size: 20px;
}

li {
    color: #FFFFFF;
}

a.videos:link {
    color: lightblue;
    text-decoration: underline;
    font-size: 20px;
}

a.videos:visited {
    color: lightblue;
    text-decoration: underline;
}

a.videos:hover {
    color: lightblue;
    text-decoration: underline;
    font-style: italic;
}

a.videos:active {
    color: lightblue;
    text-decoration: underline;
}

/*Unvisited link.*/
a:link {
    color: lightblue;
    text-decoration: underline;
    font-family: Courier, monospace;
}

/*The link after it has been clicked.*/
a:visited {
    color: lightblue;
    text-decoration: underline;
}

/*When the linked is hovered over.*/
a:hover {
    color: lightblue;
    text-decoration: underline;
    font-style: italic;
}

/*When the link is clicked, but not released.*/
a:active {
    color: lightblue;
    text-decoration: underline;
}

Upvotes: 0

Views: 503

Answers (3)

lawrence_monk
lawrence_monk

Reputation: 393

This is how CSS works. Remember, CSS is all about 'cascading', so anything specified at the top gets overridden by stuff specified after it.

e.g.

body { color: red; }

body { color: blue; }

body { color: green; }

When the browser reads this, first it is set the colour red; then it is told that it needs to be made blue, and finally that it's instructed that it should be green.

More details can be read on the Mozilla Developer Network (MDN) here.

In your case, you have the background property specified twice. Remove the line background: rgb(0, 0, 0); /* Fallback color */

Upvotes: 0

MohammadMahdi
MohammadMahdi

Reputation: 11

In css, lower lines override higher lines. That is why its name is Cascading Style Sheets. You have set 'background' twice in .text-block, so the second 'background' sets for class.

Or

You can add !important to the end of properties. This will avoid to lower lines override higher lines.

Upvotes: 1

shdeaco
shdeaco

Reputation: 1

It is being overridden because you have defined the "background" tag twice in .text-block. Remove the background tag that you have labeled as "Fallback color" and you should be good to go. If you would like to define the color in your background tag you can add it into the rgba function i.e. rgba (RED, GREEN, BLUE, ALPHA/opacity).

Upvotes: 0

Related Questions