This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 8 years ago.
I'm attempting to add three social media icons through CSS. The company logo was added to the website through CSS (images/logo.png).
I've attempted extensions by adding commas, but that causes the entire logo to disappear.
Any CSS advice here would be greatly appreciated.
Update
The "duplicate" in question didn't address the position overlap issue I was having.
The multiple images issue is now resolved. The only issue I'm running into now is applying individual links to each social media button. Any advice?
#heading h1 {
text-align: left;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 92px;
background:#396ba5 url(images/logo.png) no-repeat 495px 0px;
}
Your current background has a colour specified in addition to the background images. In this case, the colour needs to be the last background specified. Only the last background can include a background color. Something like this should work:
#heading h1 {
text-align: left;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 92px;
background: url(images/logo.png) no-repeat 495px 0px,
url(images/twitter.png) no-repeat 495px 50px,
url(images/facebook.png) no-repeat 545px 50px,
url(images/facebook.png) no-repeat 545px 50px,
#396ba5;
}
Related: https://stackoverflow.com/a/5427455/1590962
I don't know why it is not working.
compare your code with this
background:
url(images/logo.png) 496px 0px no-repeat,
url(thingy.png) 10px 10px no-repeat,
url(Paper-4.png);
or
background-image: url(images/logo.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
or
background: url(images/logo.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
Related
I have made a jsfiddle = https://jsfiddle.net/wLomyf65/
HTML:
<div class="skeleton-6euk0cm7tfi"></div>
CSS:
.skeleton-6euk0cm7tfi:empty {height: 100px; background-color: #ffffff; border-radius: 0px 0px 0px 0px; background-image: linear-gradient( #676b6f 6px, transparent 0 );background-repeat: repeat-y;background-size: 88px 100px;background-position: left 0px bottom 0px;}
I wish to vertically bottom align the linear gradient (so that its in the bottom left corner).
I have used: background-position: left 0px bottom 0px; but this hasn't done it.
A slight problem with the way you are setting things up is that the height of the element itself and the height of the background image (before you have sized it) are the same, and its drawing the gray for 6px from the top (the default direction for a linear-gradient) and the rest is transparent.
This snippet slightly simplifies what is going on.
It 'draws'a background image in the gray color, setting its width to 88% and its height to 6px and its position to bottom left. It sets it to not repeat on either axis.
body {
background: red;
}
.skeleton-6euk0cm7tfi:empty {
height: 100px;
background-color: #ffffff;
border-radius: 0px 0px 0px 0px;
background-image: linear-gradient( #676b6f, #676b6f);
background-repeat: no-repeat;
background-size: 88px 6px;
background-position: left bottom;
}
<
<div class="skeleton-6euk0cm7tfi"></div>
I am creating a page with multiple slanted divs on it. This divs should have a "border" (which I am currently generating with a drop-shadow).
Using the filters on an extra .dropshadow class does not work, but it does show up when I am using the filters on the <main> tag instead.
Q1: why is this happening?
Q2: is there another solution for generating the borders aside dropshadows? With DS I am running into problems with opacity on the colored element. It's still solid although defined as rgba with .75 opacity and only gets semi transparent when I am removing the dropshadow from the element.
Codepen
body {
padding: 0 0 200px 0;
margin: 0;
background: transparent url("https://images.unsplash.com/photo-1622495546323-5dac33dedb01?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2167&q=80") no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: Arial;
line-height: 1.6rem;
}
html {
--pad: calc(20px + 5vw);
}
main {
font-family: Arial;
/* Here it DOES work (remove filters in .dropshadow class to test it): */
/*
--b:20px;
filter:
drop-shadow(var(--b) 0px 0px #f2f2f2)
drop-shadow(0px var(--b) 0px #f2f2f2)
drop-shadow(calc(-1*var(--b)) 0px 0px #f2f2f2)
drop-shadow(0px calc(-1*var(--b)) 0px #f2f2f2);
*/
}
.dropshadow {
/* Here it does NOT work: */
--b:20px;
filter:
drop-shadow(var(--b) 0px 0px #f2f2f2)
drop-shadow(0px var(--b) 0px #f2f2f2)
drop-shadow(calc(-1*var(--b)) 0px 0px #f2f2f2)
drop-shadow(0px calc(-1*var(--b)) 0px #f2f2f2);
}
.content__slant {
/*background: orange;*/
background-color: rgba(250, 174, 64, .75);
position: relative;
padding: 120px 40px 120px 40px;
clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
color: #000000;
}
<main class="content">
<div class="content__slant dropshadow">
<p>
We try your eye, but can you change everything? submit your meaningless business jargon to be used on the site!, but that will be a conversation piece this red is too red can you pimp this powerpoint, need more geometry patterns I have an awesome idea for a startup, i need you to build it for me. The flier should feel like a warm handshake. The animation does not work, when i print the page you might wanna give it another shot, or can you turn it around in photoshop so we can see more of the front can you make the blue bluer? jazz it up a little, can you please send me the design specs again?
</p>
<p>
I know somebody who can do this for a reasonable cost. Anyway, you are the designer, you know what to do can you make the logo bigger yes bigger bigger still the logo is too big can you use a high definition screenshot, in an ideal world. Remember, everything is the same or better in an ideal world can you please send me the design specs again?
</p>
<h3>Thats not what i saw in my head at all!!</h3>
<strong>... and so it ends.</strong>
</div>
</main>
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 4 years ago.
I can not for the life of me figure out what seems so simple. And on top of that, I have this simple css problem which I can not figure out. :-)
I am trying to shift the position of a background image by changing the class. This does not have to happen within a single html file, and so javaScript is not involved.
This is like the classic "cropped toggle button" where the hover state moves the image a set number of pixels. However, it does not seem to work in this case.
In step1.html, my html looks like this:
<div id="progress" class="progress1">
<p>STEP 1/3 </p>
</div>
In step2.html, my html looks like this:
<div id="progress" class="progress2">
<p>STEP 2/3 </p>
</div>
Note the sole change is class="progress1" to class="progress2".
My css looks like this:
#progress{
position:relative;
display:block;
background: url(../images/progressBar.png) 65px 0px no-repeat !important;
width:565px;
height:36px;
line-height:36px;
margin:1em 0;
}
.progress1{
background: url(../images/progressBar.png) 65px 0px no-repeat !important;
}
.progress2{
background: url(../images/progressBar.png) 65px -36px no-repeat !important;
}
.progress3a{
background: url(../images/progressBar.png) 65px -72px no-repeat !important;
}
.progress3b{
background: url(../images/progressBar.png) 65px -108px no-repeat !important;
}
I have also tried add the full background declaration in the id, and only changing the position in the classes, like so: background-position: 65px -108px.
Try this:
#progress{
position:relative;
display:block;
background: url(../images/progressBar.png) 65px 0px no-repeat !important;
width:565px;
height:36px;
line-height:36px;
margin:1em 0;
}
#progress.progress1{
background: url(../images/progressBar.png) 65px 0px no-repeat !important;
}
#progress.progress2{
background: url(../images/progressBar.png) 65px -36px no-repeat !important;
}
#progress.progress3a{
background: url(../images/progressBar.png) 65px -72px no-repeat !important;
}
#progress.progress3b{
background: url(../images/progressBar.png) 65px -108px no-repeat !important;
}
The problem was that #progress selector was always higher specificity than .progress1 or .progress2 selector even with !important. So you need to keep the specificity on same "level" to be able to overwrite it with .progress1 or .progress2
The code below is creating the desired background but duplicating it twice down the page. Why is this and how can it be prevented? I am testing this in Google Chrome.
body {
border-top-left-radius: 200px;
border: 20px solid black;
background: radial-gradient(at top left, lightgreen, blue);
}
Oriol is right, you have to add the background-repeat property to your CSS.
So just add background-repeat: no-repeat; and you should see that your background doesn't repeat. This also works for background images.
Good luck.
Use the following css
body {
border-top-left-radius: 200px;
border: 20px solid black;
background: radial-gradient(at top left, lightgreen, blue);
background-repeat: no-repeat;
}
You may need to mention background-repeat and background-size property.
Css
body {
border-top-left-radius: 200px;
border: 20px solid black;
background: radial-gradient(at top left, lightgreen, blue);
background-repeat: no-repeat;
background-size: cover;
}
Is there any way to apply multiple background images using sprites?
something like the below code?
background-image: url("../images/button-sprite.gif"),url("../images/button-sprite.gif");
background-position: right -92px, 0px 0px ;
background-repeat: no-repeat;
font-size: 1em;
margin-right: 5px;
padding-right: 35px;
width:500px;
height:500px
You can have multiple background images
see the EXAMPLE
Here is my css:
.sprite_box
{
background:
url(http://i.imgur.com/On0lt.png) -162px -551px no-repeat,
url(http://i.imgur.com/On0lt.png) -200px -530px no-repeat,
transparent;
height: 24px;
width: 81px;
margin:5px;
}
Read about sprite here
Here you can create sprite image
Here you create css for your sprite image
Yes, you can have multiple background images, but it is limited to box items. There is some info on this at CSS3.info
Yes, you can. The shorthand method is less verbose:
.sprite {
background:
url(http://www.google.com/images/srpr/nav_logo41.png) 0 -243px no-repeat,
url(http://www.google.com/images/srpr/nav_logo41.png) 42px -93px no-repeat,
#ccc;
width: 160px;
}
Note that you can only state one background color, and you state it at the end of the declaration.
See it in aciton http://jsfiddle.net/TMHPh/