I have a Background Image [through CSS], I want to Link a Specific Part of that Image like it says "Home" and I want to point it to my site's home.
I think the Image Mapping works only with normal images and I can't find a way to do it with Background Image [Actually I haven't tried.]
So Can anyone please tell me how to do that?
Thanks :)
Use a 1px transparent png over the background image
Set the size of the png to the size of the background or link you want to make
Now you can either just link that transparent png, or map it
If you're having trouble fitting the png in the space, float it or use position:relative to get the overlaying transparent image to where you need it.
Lets say we have
HTML
<div>
</div>
CSS
div
{
width: 100px; /*the same width of the background image*/
height: 100px; /*the same height of the background image*/
background-image: url("#image");
position: relative;
}
div>a
{
position: absolute;
top: 10px /*the distance of the "home" part of the image from the top*/
left: 20px /*the distance of the "home" part of the image from left*/
width: 10px /*the width of the "home" part of the image*/
height: 5px /*the height of the "home" part of the image*/
display: block;
}
div>a:hover
{
outline: 1px solid black;
}
Related
I am building a webpage and I am attempting to add an image behind the container in the margins on the left, right and top.
The closest example of my current webpage is found in this demo: https://html5up.net/phantom.
I wish to ass a background image similar to the blue in this image: https://i.stack.imgur.com/NHbqU.png
So I want the image to be behind a floating page.
Well, add the background image for the body and add background: white (or whatever color you want) to the content container to avoid the body background "shining through".
Is the following code what you were looking for?
If so, essentially it is a background color for the "border", the above element having a margin.
body {
background-color: dodgerblue;
}
#content {
position: fixed;
background-color: #fff;
border-radius: 15px;
padding-top: 15px;
text-align:center;
height: 100%;
width: 88%;
margin: 25px;
}
<body>
<div id="content">
<h1>Wow!!</h1>
</div>
</body>
here is a background image for a header I want to repeat
how do I repeat the image horizontaly because the left and right are not the same?
In case you want to make the image fit a variable width, you need to set a part that needs to repeat. There is no way of doing this with one image, since you can't mirror the image.
You will need to manually mirror the image. An example could be:
Html:
<div class="left-image side"></div>
<div class="center"></div>
<div class="right-image side"></div>
The CSS would be something like:
.side {
position: absolute;
top: 0;
height: *height of the image*;
width: *width of the image*;
}
.left-image {
background: url('*link to left image*') no-repeat 0 0 transparent;
left: 0;
}
.right-image {
right: 0;
background: url('*link to right image*') no-repeat 0 0 transparent;
}
.center {
height: *height of lowest part, or height of image*;
width: 100%;
background: url(*url of image*) repeat-x 0 0 transparent;
/* or */
background: *color*;
}
The center could either be a repeating image, or just the background color in width the height of your image. This depends on the image you're using.
I hope this helps.
if you want to have the black portion through out then,
You cant repeat this image, as this will not be giving good effect, try just cutting a small part of it and repeat that, it will distribute itself evenly.
You have to make an extra image, the smallest part and declare both images in your background css
background:url(xxx.jpg),url(yy.gif)
or cut the image at the angle and just repeat the smaller image.
Just position the image to the right and set a bg color the same color as the image.
NB...will not work with transparent image.
JSFiddle Demo
header {
height:96px;
background-color:black; /* or whatever color of image is */
background-image:url(http://i.stack.imgur.com/oF6ey.png);
background-position:top right;
background-repeat:no-repeat;
}
I have this image:
How can I used part of the .png file as an image? I want to use upper part for my <a class="non_check"> and lower part for my <a class="checked"> classes as background.
You're going to want to use CSS image sprites. With image sprites, you can show just the part of the image you want to use.
For example:
a.checked {
width: 20px;
height: 20px;
display: block;
background:url('image_here.png') 0px -20px;
}
a.unchecked {
width: 20px;
height: 20px;
display: block;
background:url('image_here.png') 0px 0px;
}
The background property defines the image that will be the background of the div.
The numbers following the image link define the position (the first number is the left and the second number is the top).
JS Fiddle Example
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
You should use appropriate CSS. You could combine fixed width and height and background, background-position properties, like this:
.checkbox
{
width: 23px;
height: 42px;
background: url(checkbox-icons.png);
}
.checkbox.unchecked
{
background-position: 0 0;
}
.checkbox.checked
{
background-position: 0 -21px;
}
Fixed size causes only the desired rectangle of the background to be visible and by changing the background-position property, you can define exactly which fragment should it be.
You need a layer (like DIV or SPAN) half the height of an image.
You place the image to the background and by setting background-position, you can move the image parts to the view or out.
You will be using background-position for this with a :hover. Something like this:
.checkbox {
background:#ffffff url('checkbox.png') no-repeat 0 0;}
width:23px
height:21px;
}
.checkbox:hover {
background:#ffffff url('checkbox.png') no-repeat 0 21px;}
width:23px
height:21px;
}
I'm looking to have a full page image with a section of the image that, when hovered over, changes the image to a colored version of the original black & white image. I tried doing this with image maps & onMouseOver, but didn't have any success. There are only two images being used, a color and a black and white one.
I just want to have it so that when you hover over a section of the black and white image, the whole thing turns to the color version, and onMouseOut reverts back to the black and white. I'm using this as a splash screen for a blog and the hovered section will serve as a link into the site.
Thanks for the help
If you don't mind your hover area being "square" then using pure css this should work (note, replace the background colors with your appropriate image and the border on the a is just for illustration). Tested in Firefox, IE7, IE8:
HTML:
<span class="img"></span>
CSS (EDITED FOR IE7-8 BUGS):
body {
margin: 300px 218px 178px 400px; /*see explanation below css*/
width: 22px; /*total width of a tag including padding and borders*/
height: 22px; /*total height of a tag including padding and borders*/
}
a { /*warning, do not give this position: use margin to position it*/
width: 20px;
height: 20px;
display: block;
border: 1px solid red;
overflow: visible;
/*deleted margin from this: moved to body*/
}
a span.img {
position: absolute; /*this gives it block display by default*/
top: 0;
left: 0;
z-index: -1;
background-color: yellow; /*bw image here*/
width: 640px; /*image width*/
height: 500px; /*image height*/
}
a:hover span.img {
background-color: blue; /*color image here*/
}
/*deleted the a:hover span.img:hover as it was not needed after all*/
Of course if IE6 is a concern, then you need to do something with javascript for it to recognize the span:hover.
ADDED ON EDIT: I discovered that the a tag would hover sometimes outside of the defined area for the IE browsers. To avoid that, the body must have margins placed on such that the left and top position the a tag, and the right and bottom must make up the difference in the image size minus the total width of the a tag.
We know how to use CSS to show only part of an image within a div (i.e., image sprites), but the image has to be a background image.
We know how to use CSS to scale an image, but the image has to be an IMG.
Does anyone know of a way to scale and image and show only part of it?
For example, I want to:
show pixels (15,15) through (100,100), and
scale it up by 200%.
The first I can do by making in a background image. The second I can do by making it a foreground image. But so far, I have not ascertained how to do both. Is it even possible using only CSS/HTML?
You could scale the image just as you would normally. Then, use a container div to crop the image. To set where the crop rectangle goes, use position: relative on the image (not the containing div). Here's an example using stackoverflow's logo:
<style type="text/css">
div {
/* Set size of crop area. Setting its location happens bellow. */
width: 150;
height: 100;
overflow: hidden; /* Crop it like it's hot! */
/* not part of the implementation; only to display what's going on */
border: 1px solid black;
background-color: #ddd;
}
img {
/* Set the crop location by shifting the image
* up by 70px and to the right by 30px.
*/
position: relative;
top: -70px;
left: 30px;
/* Scale the image as you normally would. */
width: 300px;
height: 150px;
}
</style>
<div>
<img src="http://sstatic.net/so/img/logo.png">
</div>