I'm making an application using Dreamweaver for a school project, and have used a version of the code I found online and re-writing it to suit the assignment needs.
Problem I have my links as actual images created in Photoshop (which are working). These are on a .css file, each by their own separate li tag. (These don't need to be changed!)
Eg.
li.accom {
height:93px;
width:556px;
background-image:url(../images/accom.png);
}
Question
How do you center these images? I've tried text-align=centre; and that hasn't worked.
Try this https://jsfiddle.net/2Lzo9vfc/64/
CSS
li {
width: 150px;
height: 50px;
margin: 10px;
list-style-type: none;
border: 1px solid black;
text-align: center;
background: url('http://placehold.it/70x50');
background-repeat: no-repeat;
background-position: center;
}
For backgrounds you have These CSS rules.
For your image, you will need of background-position attribute with value: center and, if you don't want it to be repeated, background-repeat attribute with value no-repeat.
Related
I've been trying to find a library with all different types of file icons, so far with no success so I'm going to need to create my own. The idea is that it'll be able to be used in the same way as emoji CSS to display the file icons as it's much easier than the need for individual columns and DIVs. Ideally I'd be able to do <i class="em-filetype"></i> to display it.
Below is an example of how I plan to go about this.
.em,
.em-png {
height: 1.5em;
width: 1.5em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle
}
.em--psd {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Adobe_Photoshop_CC_icon.svg/2000px-Adobe_Photoshop_CC_icon.svg.png")
}
<i class="em--psd"></i>
I'll eventually host all of the images on my own server so that they're available for use. I just need a way of making this work so that I can then write the CSS for each variation. Preferably just the one that then matches the height of the text it is in.
Any help would be appreciated, as would pointing me towards a library you may know about as I'm so far unable to find one fit for purpose so will have to make my own.
Thanks in advance.
Either you need to apply two classes to the element. <i class="em em--psd"></i>
or
Adjust the selectors:
[class^="em-"],
[class*=" em-"],
.em-png {
height: 1.5em;
width: 1.5em;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle
}
.em--psd {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Adobe_Photoshop_CC_icon.svg/2000px-Adobe_Photoshop_CC_icon.svg.png")
}
I cannot figure out how to center this image on my mobile website.
Here is the code I am using, I am a beginner in CSS so I'm sure this is an easy fix. Just need some help. Thanks
#emotion-header-img {
display:none;
}
#emotion-header {
height:100px !important;
background-image:url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png") !important;
background-repeat:no-repeat !important;
background-size:contain !important;
}
Assuming you want the element to be centered horizontally and vertically as well:
/* generated from howtocenterincss.com, personally tried and tested! */
#emotion-header {
display:flex;
justify-content:center;
align-items:center;
/* height:100px !important; no need for this if you don't want to limit size*/
background-repeat:no-repeat !important;
background-size:contain !important;
}
#emotion-header-img {
height: 100px;
}
<div id="emotion-header">
<img id="emotion-header-img" src="http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png" alt="image header" \>
</div>
Of course there are many many other possibilities, and things get complicated when you want to add support for old browsers like IE7 or IE8. On anything before IE11 you would need to use a table cell. The above code snippet works for IE11 and mordern browsers.
A relevant and good resource I've found when trying to center things in CSS is howtocenterincss.com, which generates the right CSS for you based on your settings and choices. In fact, contrary to the name of the web app, it handles all sorts of alignments too. Just note that the generated code is to be embedded inside HTML elements with the <style> tag, which you can just extract whatever is inside those style tags and move to a CSS file for use.
So you mean want to align the background-image? If right, you can use background-position. Example:
#emotion-header {
width: 200px;
height: 200px;
border: 1px solid #ddd;
background-image: url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png");
background-size: 100px;
background-repeat: no-repeat;
background-position: center;
}
<div id="emotion-header"></div>
I have being wondering thinking what do one achieve this type of background in css for quite a while now. It's an image background, yet the image does not seem to be there. You cant download the image and cant drag it along. Please see the Pink stylish image background here . How can I achieve that? Or can some one help me with the feature name? Or perhaps a good link where I can learn or see the example on that? I just try googling but don't know what it's call. Another example is the chinese new year background Here.
Its a background-image:
New year:
.homepage-background-cny {
background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}
Etsy:
#seasonal-hero {
background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
width: 100%;
height: 400px;
min-width: 1030px;
cursor: pointer;
position: relative;
}
Background images usually cannot be dragged, the source of the elements background can be found with the inspector:
JSFiddle Demo
div{
height:300px;
background: url('http://lorempizza.com/1000/500');
}
<div>Background-Image</div>
They're just CSS background images:
Demo
HTML
<div id="container">
This is the content.
</div>
CSS
#container {
padding: 10px;
min-height: 600px;
width: 100%;
background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}
In CSS you use the background-image rule:
background-image: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg");
this is the one on the page you link uses.
Best,
Michael
I've an issue by using an base64-encoded SVG. I used the following SVG:
Menu Icon from iconmonstr
I passed this file through:
SVG Optimiser
& Base64 Encoder
Finally I created an a-element with two classes
.ui-icon-btn {
display: block;
background-color: red; //just a randomly picked color
}
.ui-icon-menu {
display: block;
width: 48px;
height: 48px;
background: url('data:image/svg+xml; base64, [...]');
}
When I open Chrome's DevTools, it tells me, that the color has been overwritten. How can I avoid this?
Example on JSFiddle
Just place .ui-icon-btn after .ui-icon-menu in the CSS.
It was being overwritten as the stylesheet is read from top to bottom.
jsFiddle example
.ui-icon-menu {
display: block;
width: 48px;
height: 48px;
background: url("");
}
.ui-icon-btn {
display: block;
background-color: red;
}
Alternatively, you could use background-image to add the image as opposed to just background thus, it then wouldn't be overwritten. jsFiddle example
The background: line is a shorthand for setting background-image, background-color, background-position etc. If you change it to background-image: instead, it won't overwrite the background-color style.
You have a space between image/svg+xml; and base64. That's not allowed as per spec. See this corrected fiddle: http://jsfiddle.net/53Zsr/2/
Apart from that, set only the background-image property, if you want to keep the color intact.
i was editing a template and there were around 50 images, so i put all the images into a Image Sprite
so the css is looks like this
.img_set_1 {
background: url(../images/csg-4e1827fd5b201.png) no-repeat top left;
}
.img_set_1-button_menu_left{ background-position: 0 -256px; width: 19px; height: 29px; }
the old css file contains this kind of lines and How to modify below line to get image from sprite?
a.blackbutton span { margin:0; padding:7px 0 7px 19px; background:url(images/button_menu_left.gif) no-repeat top left;}
Regards
i recommend using a tool that GOOGLE suggest to use
http://spriteme.org/
run the script on ur page and it will generate everything for you, great script!