What happens if I have both a background-color and background-image?

Frequently Asked Questions CSS FAQ
1

Question

What happens if I have both a background-color and background-image property on the same element?

Answer

When we have both a background-color and background-image property applied to the same element, whichever property that is physically lower in the CSS file will be applied. In the example code our background-image property is physically lower in the CSS file and will be rendered to the page instead of the background-image property. If however, the background-image URL value fails to load, the background-color property will be applied instead.

Example:
HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
</head>
<body>
  <div>
    <h1>Hello World</h1>
  </div>
</body>
</html>

CSS:

div {
  height: 200px;
  width: 200px;
  color: white;
  background-color: rebeccapurple;
  background-image: url('https://images.unsplash.com/photo-1535544320549-1d65b9d3d9d7');
  background-size: cover;
}
4 Likes
2

There is a typing error in 2nd sentence, you meant" In the example code our background-colour property is physically lower in the CSS file and will be rendered to the page instead of the background-image property.? right?

1 Like
3

Position in the physical file applies to selector rules only, not the declaration blocks. They are object like and have no order.

To experiment and see for yourself what happens, comment out or remove the background-color property and create a new selector rule with the same selector.

div {
    background-color: rebeccapurple;
}

Write that rule AFTER the one in your post above, and save. Refresh the page. What do you see? Background color, only?

4

Hi,

I came to this topic from a link in “A Closer Look at CSS” lesson of the “Make a Website” course. I think @aubsrey’s answer is incorrect. Within a rule, it doesn’t seem to matter if you have background-color or background-image first. background-image, if it loads successfully, overrides the background-color.

In fact, it doesn’t even matter if you try to override the background image by placing background-color into the inline CSS of a specific element. background-image still displays. This is not surprising, because W3C states:

The color is drawn behind any background images

I hope this helps anyone.

2 Likes
5

In the days of the browser wars browsers were often quirky so it was common to see ‘rule of thumb’ type recommendations come up in the community.

color
background-color
background-image

was the order of the day. Today’s browsers tend to conform better to recommendations and more vendors adhere to the specs. Many of the old rules have fallen away.

6

I am completely lost in this section as whatever answer I gave did not run in the CSS even when the correction or solution is given, I see no difference. So frustrating.

7

May be this very class is not for me or something wrong with the main.CSS.
When I ask for help in just one question, the rest of then answers get supplied and I wonder how then I can progress.

8

We will need to see your markup and style sheet to be able to draw any conclusions. Please post the code in a reply.

9

body {
height: 100%;
margin: 0;
text-align: center;
width: 100%;
}

h1 {
font-size: 32px;
font-family: Palatino, ‘Palatino Linotype’, serif;
color: rgb(121,149,117);
}

h2 {
font-size: 56px;
}

.hero {
padding: 250px 0;
margin: 30px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
background-image: url(“https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-2/bg.jpg”);

}

p {
font-size: 2rem;
}

.hero a {
color: #00FFAA;
font-size: 1.25em;
text-decoration: none;
}

1 Like
10

I was only supposed to change 32px to 48px; yet it did not run but kept asking if I had changed the value to 48px.
it started with change the color of the font to red, I did for over 20 mins but it would not run, when I got tired and asked for one solution, I got the entire solution given. so sad.
I clicked on next experience similar error.

11

Not needed, and may actually force a vertical scroll bar into the fray.

Also not needed on the BODY.

Padding is something we need to be well versed in. It has side effects that need to be understood.

This is relative to the body, but the font size is not set for that.

Please post a link to the exercise page so we can get a clearer picture of what is expected.

12

Here is question please.
The h2 heading for the Mystwood Publishing website would be more impressive if its font size were larger.

In main.css , locate the h2 selector and set font-size to 48px .

Run your code and notice how the size of the heading increases in the web browser.

13

Link to exercise, please.

14

Please how do I share the link. Where can I see it in the lesson section?

15

Copy the URL from the location bar of the browser.

16

Learn how to style text and add background images with CSS.
Where can I find it if not the above that I just copied please

17

https://localhost/
This one here?

18

https://www.codecademy.com/courses/make-a-website/lessons/closer-look-css/exercises/font-size

1 Like
19

Okay, I see now what we are given to work with. Ignore my earlier comments.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Sprout</title>
	<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
	<h1>Mystwood Publishers Ltd.</h1>
	<div class="hero">
		<h2>Sprout.</h2>
		<p>A book by J. Daniel Bedford</p>
		<a href="#">Read now.</a>
	</div>
	<p id="footer">&copy; Mystwood Publishers Limited</p>
</body>
</html>

main.css

body {
  /*height: 100%;*/
  margin: 0;
  text-align: center;
  /*width: 100%;*/
}
h1 {
  font-family: Palatino, 'Palatino Linotype', serif;
  font-size: 32px;
  color: rgb(218,190,206);
}
h2 {
  font-size: 56px;
}
.hero {
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
  padding: 250px 0;
  margin: 30px;
  background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-2/bg.jpg');
  background-size: cover;
  color: #ffffff;
}
p {
  font-size: 2rem;
}
.hero a {
  color: #00FFAA;
  font-size: 1.5em;
  text-decoration: none;
}
#footer {
  font-size: 0.75rem;
}
20

Yes, even with that color of #ffffff; the code refused to run.
I have however moved on with their solution that changed the color to entirely different mixture of color.
I also noticed that when I moved back one step or refreshed or keep off for sometime, the code ran ok. I sincerely do appreciate your timely responses though.
I am in the last segment right now.
Thanks again.

1 Like