I have an image with and array 16x16 of multiple icons. e.g. "http://www.freepbx.org/v3/browser/trunk/assets/css/jquery/vader/images/ui-icons_cd0a0a_256x240.png?rev=1"
Any idea how to choose only one of those icons and set it as a background image using CSS?
What I want to achieve is have an x icon or tick icon to the right of an input text element in to notify the user if what he has given as input is valid or invalid.
Thanks,
Stavros
You would set the height of an element to the height of the icon in that image that you want, and then set the background of that element like so:
span {
background:url(path/to/image) 50px 10px;
height:10px;
width:10px;
}
Where the element used is a span, and the desired icon is at position (50px, 10px). To learn more about positioning backgrounds have a look at: http://www.w3schools.com/cssref/pr_background-position.asp
You can accomplish this with css, something like this:
div#myDiv {
background-image:url('url-to-image');
background-position:50px 50px; /* coordinates of the top left corner of the image portion you want to display */
width:20px; /* Width of image portion */
height:20px; /* Height of image portion */
}
Related
I'm new to WordPress and am using the Astra theme with the standard Gutenberg builder. It would be great to be able to have a text that can be placed over an image like on this website:
The green square image should be placed behind the text:
With the standard Cover block it scales the height of the image too large, see second picture. When using Media and text block, the text can't be placed over the image.
I tried using the Spectra plugin of Astra to get this done, but can't seem to find a way. Another idea was to set a fixed height for a Column and place the Cover in there. But the object Column only has Minimal height and not Fixed height.
Any help would be greatly appreciated.
By adding an additional CSS class to the paragraph within the Cover block, you can use clip-path in CSS to draw the required shape to fit the text content; without the need for a background image, eg:
style.css / style-editor.css
.green-background {
position:relative;
width: fit-content; /* to only cover the text */
float: left; /* default is centered in the Cover block */
z-index:0;
}
.green-background::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0% 100%); /* background rectangle shape */
background-color:rgb(115,213, 54); /* green color */
z-index:-1;
}
Example Cover block with background image, color overlay with Additional CSS green-background applied only to Paragraph:
NB. The caveat to this method is that the Paragraph block can still override/apply its own text and background color: if a paragraph background color is picked it will appear over the top of the green background shape. If this is a concern, there are other steps you can take like extending the Cover block to remove the option.
I have an image set as a background like so
.about {
height: 351px;
background-image:url("../images/about.png");
background-position:center;
background-repeat:no-repeat;
}
And I'm trying to user :hover
.about:hover {
background-image:url("../images/hover.png");
}
to display another image over the top. I want the original picture to still be there as the hover image has transparency.
This way replaces the image, is there a way to not replace it but just hover over the original image?
You need a mask, or an element inside your .about element (or positioned absolutely over it). The mask has the hover image as its background, but has visibility:hidden. Then, when the .about element is in hover state, it activates the mask. .about:hover .about-mask {visibility: visible;}. Pro tip: using visibility:hidden instead of display:none allows the browser to load the image, even though its not visible, so you wont have any flickering.
http://jsfiddle.net/nDHbD/
You could place a div above the .about one, then have it display it's image on :hover, that way, both images would show. Even better, you could animate a transition on your new div so it goes smoothly.
here is the file : http://studioteknik.ca/stackoverflow_question/test1.html i need to see only one background image at the time, let's say the second. It's 400 pixel from the top, but i need it image to be crop top 400 height. HOW TO DO THAT ?
In general content images should not be backgrounds or sprites, they should be inline images using the IMG tag. Sprites are usually reserved for UI elements such as icons and menu elements.
<div class="sprite1"></div>
CSS:
.sprite1 {
height:400px;
width:400px;
background-image:url(http://www.studioteknik.ca/stada/wp-content/themes/stada-theme/images/banner_sprite.jpg);
background-position:0 -400px;
}
I use a pseudo element (before/after) to generate the box size I want for the sprite and add the background-image to that.
That way you can set the 'normal' element to position: relative and the :after to position: absolute;.
Then position the after as you want it in relation to the main container and the size of the after element prevents any more of the image sprite 'bleeding out'.
I documented that technique more fully here: http://benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/
Yes - that's a good answer. Generally, you position a sprite exactly the way you would position a normal image, but set the height and width so that they only cover one portion of it. The background position is the only thing that changes. If I had a 40 pixel high sprite and wanted to display it has 2 20px high images, the code would be this:
.sprite1{ height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position: 0 0;
}
.sprite2{
height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position:0 -20;
}
I've been fiddling with an image sprite to be used in a background.
I need to select two parts of an image and then place them in different locations in the body background, one in the bottom left and one in the top right.
Lets say I have an image that is a rectangle - 1700px wide and 1100px tall. This is my image sprite.
I need to select a rectangle shaped area from the image sprite that is 600px wide and 400px tall from the top right of the sprite. I need to place this part in the top right of the body element as a background.
I then need to select the bottom left most part of the image sprite that is also 600px wide and 400px tall. I need to place this part in the bottom right of the body as a background image.
AFAIK you can only set one background image per element, so you would have to add pseudo elements (:after/:before)
#area {
position: relative; /*by relatively positioning the element it acts as the reference point when absolutely positioning the pseudo-elements*/
z-index:1; /*positive z-index will allow for the correct z-axis positioning of the pseudo-elements*/
/*you could set any background you want, your 2 background images will be in :before and :after*/
}
#area:before,#area:after {
position: absolute; /*we want to position them*/
z-index: -1; /*_back_ground-images... so they are behind #area*/
}
#area:before {
/*set width, height, the 1st background-image, ... here*/
}
#area:after {
/*set width, height, the 2nd background-image, ... here*/
}
you may have to add display:block and content:" " to your pseudo elements, so they don't get omited
EDIT: I assume you know the basics of CSS background-sprites, pretty much everything else has now been done for you ;)
I need to place an icon of 48x48 as background. I have this icon in my image sprite where of course there are many other images.
Is there a way to show as background only a porition of the image?
thanks
EDIT: Is there a way to do this without setting width-height of the backgrounded element? (I am not sure if acutally i can set a width-height)
Edit2: this is what i need: http://jsfiddle.net/pdxnj/
Thanks
Set the width and height of the element to 48px.
.element{
width: 48px;
height: 48px;
}
Set the background of the element to your image
.element{
background-image: url('image.png');
}
Move the background so that the top left corner of the icon is positioned correctly.
.element{
background-position: 20px 94px;
}
The two numbers in background-position are the X and Y coordinates (respectively) where the top left corner of your 48px by 48px is in your sprite image. So maybe it's actually 96px 0px or something.
EDIT
If you can't control the width and height of the element you are trying to put the background in, but you can add new DOM elements, you can try adding a span inside the element you really want to put the image as a background for.
It would look something like:
<div id="noControl">
<span id="justCreated">
</span>
</div>
and the CSS would look exactly the same as above, except you would need to treat the inline span as a block element:
#justCreated{
display: inline-block;
}
EDIT 2
If you have control over new DOM elements, and want to make your sprite the background without messing with a span, just add another div inside your original one.
Would wind up looking like:
<div id="noControl">
<div id="justCreated">
ALL of the content that used to be inside #noControl
</div>
</div>
and the CSS for it would be
#justCreated{
width: 48px;
height: 48px;
background-image: url('image.png');
background-position: 96px 0px;
z-index: -200;
/* z-index of all the contents needs to be not set, or set to larger than -200 */
}
This is all theoretical, but it SHOULD work.
This way, you can apply the sprite sizing to a block element without messing with the inline stuff. This may affect CSS if it addresses elements by child status (like #noControl > a), because you are inserting a div between the parent and the child.
I am still researching whether you can do this at all if you have no control over the DOM at all.
simple answer no, but by using html elements you can. Html element hight and width should match the background portion of image.
You can if you're not going to be setting a repeating background. Otherwise no.
To do this, you need to play around with the background offset, and width/height of the actual element that you're setting the background on.
it will depend on how much whitespace is around it in the sprite whether it will fit where you need it to without showing parts of other images.. however you could e.g. put a span where you want the image and crop the span to 48x48 so that it only shows the icon itself. it kind of depends what you want to use it for and how the sprite is built
It's better using ::before or ::after so you can easily define your image size without having overflow problems!
This is possible. You need to display that in a 48x48 div then set position: absolute style for the div and define left and top too for it. Also set z-index: 0 for the div so that it appears under everything.