I have this code:
HTML:
<img class="d" src="i3.jpg" alt=""/><img class="d" src="i4.jpg" alt=""/>
CSS:
img.d{margin-top:10px;margin-left:20px;}
however, I want to put the i3.jpg in the CSS, not the html to further separate the structure from the presentation...how do I go about doing this.
Thanks.
Found this
link here
You can set the image as a background image of an element.
HTML:
<div class="d"></div>
CSS:
div.d{width:20px; height:20px; margin-top:10px; margin-left:20px; background:url('i3.jpg') 0 0 no-repeat;}
One option would be to use e.g. a div-element and attach a background image to it using CSS.
An img tag should be used when the image is content, like a cat wearing a fun costume. Moving image references to CSS can make sense when they're stylistic/UI and not content.
That said, the answer is to remove your img tags and replace them with divs. You can then set a background-image for the div, and just give it some basic properties to size/position it.
HTML:
<div class="d"></div>
CSS:
div.d {
display: block;
background-image: url('i3.jpg');
width: 100px; /* or whatever it should be */
height: 100px; /* or whatever it should be */
margin-top: 10px;
margin-left: 20px;
}
Related
<div class="profile">
<img src="image/JaeHeadShot.jpg" alt="Head Shot"/>
<h1> Jae Hong </h1>
</div>
.profile{
border: 2px solid rgba(0,0,0,0.3);
text-align:center;
padding: 30px;
}
img.profile{
width:423;
height:281;
}
Here are my HTML and CSS. I am not sure what I'm doing wrong, but the image won't get smaller. However, if I do
<img src="image/JaeHeadShot.jpg" alt="headshot" width="423" height="281"/>
the image seems to change. I just want to know why it's not working when I work on the CSS.
Appreciate your help!
The img.profile wont select the image since the image doesn't have a profile class, and the numbers are missing the units.
Do it like this:
img {
width : 423px;
height : 281px;
}
profile is the class for the div element, not for the image.
img.profile{
width:423;
height:281;
}
if you want to use special css for the image you can define a class for it.
.myImage{ width: 423px; height: 281px}
and use it in image tag.
<img src="image/JaeHeadShot.jpg" alt="headshot" class=".myImage"/>
The image doesn't have a class attribute in your code.So,accessing it with class profile won't fetch you image.
So,as there is only image,you can just give
img {
width:423;
height:281;
}
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.
I'm trying to create a CSS for these lines, but they are not working in the way I want. There will be several similar lines like this(about 60).
First: all lines will use img src="staticimage.png". Is it possible to set this image as default in CSS(It will handle a link, set in the "a" tag before)?
Second: how can I remove the dimensioning code (width="50" align="right) from this image and put it in the CSS?
Here is my code:
HTML Code:
<div id="whiteborder"><img src="image1.png">Text 1<img src="staticimage.png" width="50" align="right"></div>
<div id="whiteborder"><img src="image2.png">Text 2<img src="staticimage.png" width="50" align="right"></div>
<div id="whiteborder"><img src="image3.png">Text 3<img src="staticimage.png" align="right"></div>
CSS code:
#whiteborder
{
background: white;
margin: 2px 10px 0px 10px;
box-sizing: border-box;
padding: 20px;
text-align: left;
font-weight: bold;
font-size:10px;
}
PS: all texts with numbers will be different. I don't want any Javascript to set these lines.
Thanks in advance!
I'm not entirely clear on what you're trying to build here but to address your individual queries:
You can't set "staticimage.png" as a default in any other way but as a background image using CSS
To remove the "dimensioning code" from the image HTML you can set width:50px; in your CSS and align it to the right with float:right;
You should be able to sort your image alignment out like this:
#whiteborder a img
{
width: 50px;
float: right;
}
However, if you change your a tag to display: block; float: right and set a background-image on it, you can then dispense with the img and set the style for all those a tags in one place.
Working Demo
HTML:
<div id="whiteborder">
<img src="image1.png">Text 1
<img src="image2.png">Text 2
<img src="image3.png">Text 3
</div>
CSS:
#whiteborder a{
background: repeat-x url("staticimage.png");
width: 50px;
height: 10px;
...
}
P.S. you shouldn't use the same id several times, but if you need you can use class instead