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/
Related
Is there a way to set a background css sprites image width?
shop
a{
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: block;
background-position: -5px -5px;
padding: 0 0 0 30px;
}
https://jsfiddle.net/jb1prcro/
right now the above a tag is 60px width, 30px for the word 'shop', 30px padding left for the cart icon,
because I am using css sprites for the background icons, right now it is showing 60px of that background image instead of just the 30px I want to show.
I also tried background-size: 30px 30px for this A tag, but it doesn't work.
You can use the pseudo-element before:
a{
display: inline-block;
background-position: -5px -5px;
padding: 0 0 0 30px;
height:30px;
vertical-align:middle;
}
a:before {
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
width:30px;
height:30px;
display:inline-block;
content:'';
vertical-align:middle;
}
Working example: https://jsfiddle.net/mspinks/jb1prcro/2/
I am not sure what exactly you are trying to achieve, but here's a practical example:
https://jsfiddle.net/ozL0yzuy/
a {
background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important;
background-repeat: no-repeat;
display: inline-block;
width: 40px;
background-position: -10px -20px;
}
You have to set a width (and actually also a height, which I didn't do in the example) for the element itself (in this case the a tag, which can only be done if its a block or inline-block element). Then you can adjust the background position accordingly.
I'm new to CSS.
I have the following CSS definition which shows an icon in my webpage.
.systemIcon{
margin-right:2px;
background:url(../images/tree/system.png?_v=001) no-repeat 0px 0px;
}
I wanted to add another icon to its right (lets say system2.png).
So I tried the following:
.systemIcon{
margin-right:2px;
background:url(../images/tree/system.png?_v=001), url(../images/tree/system2.png?_v=001) no-repeat 0px 0px;
}
But the result is that the icon show on ON TOP of the other.
Is there any way to show them side by side?
Specify background-position and background-repeat for each image:
span {
display: inline-block;
background-image: url('http://icons.iconarchive.com/icons/graphicloads/colorful-long-shadow/256/Home-icon.png'), url('http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Sign-LogOff-icon.png');
background-position: 0px 0px, 256px 0px;
background-repeat: no-repeat, no-repeat;
width: 512px;
height: 256px;
}
<span></span>
If you want to show icons, perhaps you should use multiple <img/> HTML tags. That seems preferable to the background CSS property.
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;
}
Fiddle link:
https://jsfiddle.net/ildaroit/evL7tn6r/
.video-wrapper {
max-width: 640px;
margin: auto;
margin-top: 20px;
}
.video1 {
border: 0px dotted black;
height: 420px;
/*height:50vw;*/
background: url("http://learn.shayhowe.com/assets/images/triangles/triangles.svg") left -3px no-repeat, url("http://learn.shayhowe.com/assets/images/triangles/triangles.svg") right -3px no-repeat;
/* background-position: left, right;*/
background-repeat: no-repeat, no-repeat;
}
How to make the image not overlapping center div content on decreasing windows size?
Like here: learn.shayhowe.com
Now, left and right image overlap .video but need to make it fixed or something else.
Thx in advance!
hello do you mean like this?
https://jsfiddle.net/evL7tn6r/6/
just add a wrapper to your video1
.page{
width:100%; /*this is not really necessary*/
overflow:hidden;
}
and a min-width to the video
you can adjust the min-width to set the minimum space between the graphics
Basically, right now I have multiple images but only one at as a background image to my body (being a blue square) and I need to to end at the start of the footer, so underneath the footer is black but no matter what I do, it doesn't seem to help.
Here's an example http://bit.ly/1nKIee1 (on postimage)
I thought that maybe if I ended the body tag, then started the footer tag it wouldn't do it but that doesn't seem to fix anything.
CSS
.nav {
background-image: url(image/top.png);
background-repeat: repeat-x;
}
body {
background-image: url(image/blue.png);
background-repeat: repeat;
background-size: contain;
background-color: #000000;
}
footer {
background-image: url(image/footer.png);
background-repeat: repeat-x;
background-color: #000000;
font-size: 14px;
text-decoration: none;
text-shadow: #000000 1px 1px;
padding: 45px;
}
Thanks in advance - Shy ♥
Don't give background property to body instead of this use a div inside body upto footer and give these properties to that div for example
HTML :
<nav>......</nav>
<div class="container">......</div>
<footer>.........</footer>
CSS :
.nav {
background-image: url(image/top.png);
background-repeat: repeat-x;
}
container {
background-image: url(image/blue.png);
background-repeat: repeat;
background-size: contain;
background-color: #000000;
}
footer {
background-image: url(image/footer.png);
background-repeat: repeat-x;
background-color: #000000;
font-size: 14px;
text-decoration: none;
text-shadow: #000000 1px 1px;
padding: 45px;
}
If you set a background to the whole body, it will apply to the whole body…
And you can’t put a footer (or what so ever is displayed) outside the body.
I guess in your case I would create a div#pageContainer to put your page content, and apply the blue background to it with
div#pageContainer {
background-image: url(image/blue.png);
background-repeat: repeat;
background-size: contain;
background-color: #000000;
}
Here is a jsfiddle.