I have a CSS sprite image, footer1.png. I'd like to use CSS to crop out a section of the image, then tile the image as the background of my .headimg3 element.
I'm trying to use the clip and background properties to achieve this, but the image isn't be cropped.
.headimg3 {
background: url(footer1.png) bottom;
background-position: -35px -358px;
background-repeat: repeat;
height:34px;
overflow: hidden;
clip: rect(0px, 200px, 0px, 400px);
}
.headimgp {
padding: 8px 0px 0px 10px;
text-shadow: 2px 1px #fff;
}
<div class="headimg3">
<div class="headimgp">
LATEST Updates
</div>
</div>
How can I crop and tile a background image using only CSS?
The CSS clip property needs to have a position of absolute in order to function correctly.
.headimg3{
background:url(footer1.png) bottom;
background-position: -35px -358px;
background-repeat: repeat;
height: 34px;
overflow: hidden;
position: absolute;
clip: rect(0px, 200px, 0px, 400px);
}
Reference: CSS Clip Property and Demo
Note:
You can't use a section of any sprite image and have that section repeated because background-repeat is for the whole image.
In this case use a image editor and crop out the sprite you need and save it as a separate image file.
Related
I want to show search icon properly for all views - with zoom / without zoom and normal view.
Problem appears when people zooms for example 110%. Icon jumps.
Fiddle: Fiddle ( try to zoom/zoom out - you will notice jumps )
HTML
<div id="outer">
<div id="block"></div>
</div>
CSS
#outer
{
background-color: #c0c0c0;
}
#block
{
background-repeat: no-repeat;
background-image: url(http://g3.acdn.lt/img/svg/icons_ptrn.svg);
background-position: 0px 3.1%;
width: 26px;
height: 26px;
display: block;
background-repeat: no-repeat;
padding: 0px;
margin: 0 auto;
}
Tried:
with and without background-position
to set background position with pixels
to set background position with percentages as it was suggested here: background-size with background-position doesn't scale the position?
Why the background image not working with
DEMO
HTML
<div class="container" style="background-color: red;"></div>
CSS
.container {
width: 100%;
height: 385px;
background-image: url(http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png);
background-position: center top;
background-size: 100% auto;
background-size: cover;
border-bottom: 1px solid #3f4858;
background-repeat: repeat-x;
left: 0px;
top: 0px;
}
Apart from the already mentioned spelling error
The problem here is with the size of your container and the size of your background image. Your image has a lot of space on top and you will see nothing for the size of you container. Check if you change the background-size property to:
background-size: 100% 100%;
Demo
For the porperty background-size you can also use contain:
the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area
AnotherDemo
Your width: 100% depends on width of parent element. And its not set. Thats why. So change your CSS to this:
.container{
width:300px;
height:385px;
background-image:url(http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png);
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background-repeat:repeat-x;
left:0px;
top:0px;
}
Also why you have in your HTML style="background-color:red;"? Do you want to have as background image png_grass_by_moonglowlilly-d5z1o5t.png or red color? Or you want to have in transparency of that PNG image red color?
DEMO
Try This:
.container{
width:300px;
height:385px;
background-image:url('http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png');
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background-repeat:repeat-x;
left:0px;
top:0px;
}
<div class="container" style="background-color:red;">
The image is of size 1024x819px and the grass is starting from 232px from top so you need to position your background image or change your div.container size so as to fit the image within the given size.
Demo-1 with container size changed:
Demo-1
Demo-2 with image position changed with your code snippet only.:
Demo-2
just notice background-position I have changed to 0px -232px;
I have tag with 25px padding and 15px border from left. And I am using arrow background image in it. Is it possible to show this background image above the border?
Here is HTML
<a id="arrow">List</a>
CSS
a#arrow {
background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
}
Here is jsfiddle link
You can put your background to the :after element as a method
CSS
#arrow:after {
content:'';/*enable after element*/
position: absolute;
top: px;/*position of the background*/
left: px;/*position of the background*/
background: url(img/your-bg.png) no-repeat;
width: px;/*width of the background*/
height: px;/*height of the background*/
}
And dont forget to add position:relative to the #arrow
You can use background position to view your image.
here is fiddle
Your css should be
a#arrow{ background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
background-position: -36px;
}
Use background-position property with values in pixels to show them on top.
For instance,
background-position: xxpx (for left-right) xxpx (for top-bottom);
PS: xx is a dummy value, which you can replace with actual numbers.
I'm trying to display an icon as a background image behind a number.
<a id="youhavemail" href="messages.php">0</a>
#youhavemail {
background-image: url("images/mail.png");
background-repeat: no-repeat;
background-size: 20px auto;
}
But since there is only one character in the anchor tag (in this case a '0') it only shows a small portion of the image.
Is there a way to stretch the containing anchor to show the whole background image?
#youhavemail {
background-image: url("http://linenwoods.com/images/offline.png");
background-repeat: no-repeat;
background-size: 20px auto;
display: inline-block;
width:20px;
height: 20px;
}
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/