How can I place only an image in a div as background image, and add url link to it.
Currenty I'm doing it this way:
<div class="image"><img src="books.png" alt="Test" /></div>
I want to do something like following, but its not working (the image does not appear).
<div class="image"><span class="books"></span></div>
Thanks.
Place the background image in the <a> tag if you want it clickable.
your css:
.image a { display: block;
background: url('image.jpg') no-repeat;
height: 50px; /* obviously use the same dimensions as your image */
width: 50px; /* obviously use the same dimensions as your image */
}
<div class="image"> </div>
or better yet, get rid of the div entirely, and just apply the image class directly to a:
<a class="image" href="example.com"> </a>
It's likely it's because the div is empty. Try something like:
<div class="image"><span class="books"> </span></div>
If it's still not showing, set the "image" class to have a background color too, so that you can see how big the div 'thinks' it is.
If you want an image to be in the background you need to set, the style property "z-index:-1", that way, the image will be in the back of the other elements in the same content div
Does it have to be a DIV?
I am writing the style inside you can use it in css file
<a class="image" style="display:block; width: (image-width); height: (image-height); background: url(image-link)"></a>
this will work...
you can use it like this if you need div..
<div class="image" style="width: (image-width); height: (image-height); background: url(image-link)"></div>
Related
I've been trying to change the size of the image on my button.
Think of it like this: I have a button with an image on it, and it's currently way too big. I've tried scaling it down as such:
<img src = "Button.jpg" height: "50%"; width: "20%"> and this doesn't work, no matter what I put in as the height and width.
Even changing it to 20px and 50px doesn't do anything. I'd prefer not having to create a class because I don't know how to navigate button classes and I'm pretty sure there's a way just to do it like how I'm doing it now.
Also, it's not actually a button, it's part of a list.
<li><a href="https://www.google.com/" target="_blank">
(That's also another issue.)
OK NEW CODE FOR THE BUTTON WITH A CLASS:
<li><button class = "test"></button></li>
</ul>
And for my CSS:
.test{
background-image: "instaButton.jpg";
height: 100px;
width: 100px;
}
You should apply custom height and width to the image, not to the button.
If you resize the button, the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
If you resize the image, the image WILL be resized, and the button will resize respectively to the image.
Run the following snippet for examples:
button {
padding: 5px;
background: #d95753;
border: 0;
}
.btn-size {
width: 30px;
height: 30px;
}
.img-size img {
width: 30px;
height: 30px;
}
<h1>
Initial styling:
</h1>
<button>
<img src="http://via.placeholder.com/350x150" />
</button>
<h1>
If you resize the button:
</h1>
<p>
the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
</p>
<button class="btn-size">
<img src="http://via.placeholder.com/350x150" />
</button>
<h1>
If you resize the image:
</h1>
<p>
the image WILL be resized, and the button will resize respectively to the image.
</p>
<button class="img-size">
<img src="http://via.placeholder.com/350x150" />
</button>
You need to link to a css file in the header. in the css file you can then say: .class and then you can change the shit. So in the html file, you first should add a class to the button so that the css knows where you're talking about.
Your code should look something like this:
<img src="Button.jpg" height="50%" width="20%">
I think you have a wrong html syntax :)
I have this code
<div class="mix category-1">
<a href="img/holder-01-large.png" class="photo">
<img src="img/holder-01-small.png alt="Ram - Srbija" class="img-small-1"></a>
Primer montaze
<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>
</div>
I want to replace this holder-01-small.png when hover over it with image with same dimensions. Is that possible by not touching this HTML code, just using CSS?
Yes it's possible, but not using the approach you have presented.
Instead, create a div (using an img tag here would mean we would need a transparent image to act as a placeholder, whereas a div will just work)
<div class="image"></div>
And in css try something like the below, you will need to specify a height and a width as the div will technically be empty, otherwise it will just collapse on itself.
.image {
background-image: url("path-to-file");
height: xx;
width: yy;
}
.image:hover {
background-image: url("path-to-different-file");
}
This div will then change it's background image.
It's possibly using this HTML, yes. (As long as you insert the missing quote after the src, that is!)
a.photo:hover img {
display: none
}
a.photo:hover::after {
content: url(http://lorempixel.com/100/100);
}
<div class="mix category-1">
<a href="img/holder-01-large.png" class="photo">
<img src="http://lorempixel.com/g/100/100" alt="Ram - Srbija" class="img-small-1" />
</a>
Primer montaze
<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>
</div>
Note that I changed the HTML to point to another image on the web in order to show something here in the snippet; hope you don't consider that to be cheating!
if you can place a div instead of an imgtag, you can add the background-imgproperty in css and then a hover. Something like this:
.img-small-1{
background-img: url('..img/holder-01-small.png');
width: 'your image's width';
height: 'your image's height';
}
.img-small-1:hover {
background-img: url('..img/myOtherImage.png');
}
I want to use the above image in a img class to put underneath the photos. That have that class. See the markup example below.
<img class="img-shadow" src="image.jpg">
or may be like this
<div class="img-shadow">
<img src="image.jpg">
</div>
How would the css look?
HTML:
<div class="img-shadow">
<img src="image.jpg">
</div>
CSS:
.img-shadow{
background:url(your image URL) no-repeat center bottom;
padding-bottom:20px;
text-align:center;
}
Adjust the padding on the bottom of the div to increase or decrease the distance between the bottom of the image and the shadow.
Just as another option, instead of using an image for your shadow, you can use CSS3 shadow property to achieve something similar.
In the fiddle, I show the same image using the class and not using the class: JS Fiddle
.img-shadow {
box-shadow: 0px 2px 10px #000;
width: 200px;
}
If what you said in the question is what you really want to do, You can simply put the shadow image below the other image using an <img> tag like
<div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSyLdxqT0UBb31xeB4yMfUjCqKld2q9FqpUMZEIvq175_4-MgAPUA"/> //Your image
<img src="http://i.stack.imgur.com/ZLAht.png"/> // Your shadow image
</div>
and position them accordingly using css..
check this fiddle
Note:there might be better ways for creating a shadow below an image, just answering the question in a straight forward manner..
Hi I have the following code to have few links on top of img. It works well in FF but not in IE. It seems IE is not clickable if you put link on top of img
<div style="z-index:-6755;"><img alt="October Offer" src="images/offers/october-offer.jpg" /></div>
<a href="#" onclick="window.parent.SqueezeBox.close();">
<div style="display:block; width: 185px; height: 32px; position: relative; bottom: 50px; left: 260px;border:1px solid blue; "> </div>
</a>
are you just trying to make the image clickable?
you can't have <href> that's not a correct html tag.
either place <img> inside <a> like so: <img />
another way is to set a div with a background image of your image and then a link inside there, make the link display : block and make it the entire width and height of the div and the whole thing will be clickable.
You can add an on-click function to img-tag.
Example:
<img src="images/logo.png" alt="logo" onclick="home()">
and then redirect it to a page.
function home(){ location.replace("/index.html") }
Implementing a "play video" function on a web site. Each video content item can have a different image. Each of these images will have the same width, but potentially differing heights (they are resized on upload to maintain aspect ratio to meet standard width requirements).
The plan was to display another transparent "play button" image over top of the content image using markup like this:
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<img src="PlayButton.png" alt="Click to Play" height="200" width="300" />
</a>
</div>
This is very similar to how channel 9 does it on their home page. This, however, appears to assume any image is of standard height and width. Are there alternative ways of tackling this?
Forgot to mention originally. We have a predefined width that things will fit into, however, each image may have a different height. For example, the same markup needs to be used to support the following images:
W x H
400 x 200
400 X 300
400 X 400
The Play button needs to be centered in each image.
Instead of the inner element being an <img>, you could make it a <div>, styled with the playbutton as the background image, positioned in the center.
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" />
</a>
</div>
You'll still need to know the size of the thumbnail image, as you'll still need to supply height and width for the div - since you're displaying the thumbnail as a background image, you won't be able to have the box scale to the right size automatically. But at least now your code can set the values for height and width without worrying about the shape of the play button getting distorted.
(note: the play button as a background image should probably be in a separate stylesheet rather than being declared inline as per my example; I did it like that to demonstrate how it differs from your original code, rather than to show best practice)
Need some your CSS to make sure things work, but this may help you:
.media {
display: table;
}
.media img {
display: table-cell;
vertical-align: middle;
display: block;
margin: 0 auto;
}
If not, please add you CSS so I can Fiddle it and make it happen.
I'd do it like this.
<div class="media">
<a class="videoLink" href="#"></a>
<img class="thumbnail" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/>
</div>
Separate the thumbnail image from the link. We want the link to appear on top of the image, and the image to stretch the height of the <div class="media">.
The CSS:
.media {
position: relative;
}
.videoLink {
display: block;
height: 100%;
width: 100%;
background-image: url(PlayButton.png);
background-position: center center;
position: absolute;
z-index: 2;
}