Background color under image doesn't work in CSS and HTML
Question
I want to make a background image on my webpage, and a background color under it so the places where the picture end you can see the color.
I tried it 3 ways:
html:
<!DOCTYPE html>
<html>
<head>
<title> title</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 header">
dssadsasddsads
</div>
<div class="col-md-3">
</div>
</div>
</body>
and I tried 3 css combinations I found none of which work:
body {
margin: 0;
background-image: url('img/bg6.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
background-color: #EE2020;}
body {
margin: 0;
background: #EE2020 url('img/bg6.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
}
body {
margin: 0;
background: url('img/bg6.jpg'), #EE2020;
background-repeat: no-repeat;
background-size: 100% auto;
}
What am I doing wrong?
Edit: I found the problem. The bootstrap CSS file had background-color set to white and I had to override it adding !important to the background-color property in my layout file.
2 answers
solution1
0 2017-12-10 21:43:32
Try this code:
body {
margin: 0;
background: url('img/bg6.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
background-color: transparent !important;
}
html {
background: #EE2020 !important;
}
This will work fine!
solution2
0 2017-12-10 22:42:38
Avoid using !important where you can .
Your options here are to include your stylesheet after bootstrap or learn about specificity . A more specific rule that could work is:
html > body { background-color: #EE2020;}
Adding classes or id also can give you a more specific rule, but you should be able to avoid that in this case.
It is important to remember if you want to override a library like bootstrap, to include your styles after the library, this is the way CSS has been designed. It's part of the "Cascade" (the C in CSS). Knowing how to use specificity to resolve any other conflicts is also important.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.