starting a new background color within a concurrent background color in html / css
Question
I was working on this web page and I was wanting to start a new background color (where Einstein appears, and since the image is orange I want to also make that part of the background orange)
I don't know if you can change a background color while you already have a background color?? anyone have an idea?
.fill-screen { position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; } .make-it-fit { max-width: 99%; max-height: 99%; } body { background-color: #EDF2EC; } fieldset { margin-top: 1em; margin-bottom: 1em; padding: .5em; } legend { color: blue; font-weight: bold; font-size: 85%; margin-bottom: .5em; } label { float: left; width: 90px; } input, select { margin-left: 1em; margin-right: 1em; margin-bottom: .5em; } input { width: 14em; } input[type="radio"], input[type="checkbox"] { width: 1em; padding-left: 0; margin-right: 0.5em; } a { text-decoration: none } @font-face { font-family: 'Poppins', sans-serif; font-family: 'Josefin Slab', serif; } /*other scripts*/ .enter:hover { background-color: lightblue; } .back:hover { background-color: lavenderblush; } .next:hover { background-color: lavenderblush; } .socials { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } .socials:hover img { opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ }
<!--bakhriddinov--> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Save The Bees</title> <script type="text/javascript" src="Index.js"></script> <link href="Index.css" rel="stylesheet" type="text/css" /> <!--font--> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet"> </head> <body style="background-color:#ffffff;"> <div class='fill-screen' style = "overflow: auto; max-height: 100vh;"> <img class = 'make-it-fit'src='tree.jpg' height="200"> <br> <br> <img class = 'make-it-fit'src='einstein_cycling.gif' height="200"> <br> <br> <a href ="Index.html"> <font size="4" face="Josefin Slab" color="4f6479" class="back"> BACK </font> </a> <a href ="page3.html"> <font size="4" face="Josefin Slab" color="4f6479" class="next"> <i> NEXT </i> </font> </a> <br> <br> </div> </body> </html>
3 answers
solution1
1 ACCPTED 2017-04-05 16:08:18
You can always just wrap each image in it's own element and assign a background-color to those elements.
.top { background: #09c; } .bottom { background: green; } img { display: block; margin: auto; }
<div> <div class="top"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> </div> <div class="bottom"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> </div> </div>
Or you can use a gradient if you want to change colors with a single background.
div { background: linear-gradient(to bottom, #09c 0%, #09c 50%, green 50%); } img { display: block; margin: auto; }
<div> <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> </div>
solution2
0 2017-04-05 16:10:24
If you want to make a orange background within the image itself I don't believe you can do that with CSS. However, you can do two things here. First is bringing it into Photoshop and using the magic wand tool to select the white background and make it transparent. Since it's a .PNG, it'll support transparency when you save it down. Second is setting a background gradient on the image itself but that won't affect the interior of the image it'll only affect the outside.
Here is the example of what you want using the Photoshop method. http://imgur.com/a/UbEjF
solution3
0 2017-04-05 16:32:19
If you know the height occupied by the top element, you could use a gradient with colour-stops to achieve what you wan. For example:
body{ background:linear-gradient(180deg,#fff 100px,#ff0 100px); height:100vh; margin:0; }
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.