I am trying to link my background image using the tutorial over at http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/#comment-28009 but it's just not working for me.
I think I have the css right, but when I insert the html to make the link, it sets my WHOLE site as one giant link. Is there a way to make the link layer behind my content so it is only clickable on the sides of the container?
I've tried using this css:
body {
background-image: url('images/bg.png');
background-position: center top;
background-attachment: fixed;
}
body #background-link {
position: absolute;
height:11000px;
text-indent:-9999px;
width:1440px;
top: 0; left: 0;
border: 0;
float: left;
}
and this html:
the link
You need to set the z-index of the container of the site so that it is higher than the anchor link. The simple way to do this -
Add this CSS:
#wrapper{position:relative;z-index:10;}
#background-link{z-index:1}
This is the HTML:
the link
<div id="wrapper">
all of your site code goes here
</div>
The position:absolute makes you're link stay in front. You can probably try z-index, but is easier to tell if i can see you're entire code? Or page-link?
Related
I'm working on my website and was originally using two separate images at the size of 210 by 210px for an image link (which changes into another image when hovered over.) However I found that there was always a little flicker when first hovering over the image which obviously bothered me so I decided to switch to a CSS sprite with two the images on it instead. That way I wouldn't get the flicker.
Unfortunately, I can't seem to get the CSS sprite to work successfully. I'm creating my website in Wordpress BoldGrid Post and Page Builder so I'm not doing the HTML/CSS, but the Customizer allows me to add my own Custom CSS which is what I'm doing.
I've given the image link the CSS ID "home" in the image settings (in Post and Page Builder). This is what I've put in my Custom CSS:
#home:hover a {
background:url(https://www.mywebsite.com/hoverimage.png);
position: absolute;
background-position: -210px 0;
}
Currently, the original image isn't budging and I can see the hover image UNDERNEATH the original image (It's border is thicker and I can see it underneath).
I must have missed something with this. Because I'm working in a Wordpress Post and Page Builder it makes following CSS Sprite tutorials online not as straightforward. Hopefully it's a easy fix.
:hover is being used incorrectly...
by using #home:hover a you are only applying the background to the a when the element #home is hovered...
it should be:
#home a {
background:url(https://www.mywebsite.com/hoverimage.png);
position: absolute;
}
#home:hover a {
background-position: -210px 0;
}
Something like below:
#home a img {
display: none;
}
#home a {
background:url("https://via.placeholder.com/420x210");
position: absolute;
width: 210px;
height: 210px;
display: block;
}
#home:hover a {
background-position: -210px 0;
}
<div id="home">
<a href="#">
<img src="https://via.placeholder.com/210x210?text=original%20image">
<a>
</div>
I have two divs:
-A header bar, which is fixed while scrolling, and stuck at the top of the page.
-A notification div, which contains a message banner that will slide down if triggered.
The header bar is fixed to the top fine, but I can't seem to get the notification div to fix itself just under it. Every time I try this, this div fixes to the top of the page in-front of my header bar; seemingly replacing it. Padding doesn't seem to help.
Can anybody offer me any suggestions, please?
Here is the working div:
#header {
text-align: left;
background-image:url(../Resources/Banner2.gif);
background-repeat:no-repeat;
background-color:#00ed32;
color:#FFF;
position:fixed;
width:100%;
top:0px;
left:0px;
padding:15px;
}
Here is the div I would like to fix under it:
.notify {
background: url(../resources/gradients.png)
repeat-x 0px 0px;
top: -40px;
left: 0px;
position:fixed;
z-index: 100;
width: 100%;
overflow: hidden;
}
The easiest way to do this is to put a "holder" bar at the top of the page and then nest the "header" and "notification" elements within there.
For example:
CSS
#holder {
left: 0;
position: fixed;
right: 0;
top: 0;
}
#header, .notify{
//what ever styles you have
//position: relative or static
}
HTML
<div id="holder">
<div id="header">...</div>
<div class="notify">...</div>
</div>
Edit
Working example: http://jsfiddle.net/Q6CWv/
Update
Adding a slide down effect on the .notify element should be fairly straight forward if you are using JQuery:
$('.notify').slideDown();
Working example: http://jsfiddle.net/Q6CWv/1/
Although the answer by #MyHeadHurts was somewhat helpful, it wasn't the best solution for me as when the notification popped down, it either overlapped the header bar or made it so that the header bar would not pop down until the notification did. I did have them in separate divs as suggested, but this could have been my fault.
My solution was to go into the JavaScript of the pop-down notification and change the "top" value to 3% of the page height. This now works perfectly, except that the header and notification bar don't align correctly if there are extreme levels of zoom applied.
I have recently put together a working navigation bar.
I'm pleased with it, but unfortunately it isn't accessible.
When images are OFF, I would like to show replacement text in its place.
Is this easy to achieve with my example: http://pastebin.com/hXth7FSK ?
Many thanks for any pointers.
Michael
You can absolutely position a span inside the element so that it covers the text as this post from Dave Shea explains:
<h3 id="header" title="Revised Image Replacement">
<span></span>Revised Image Replacement
</h3>
/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
The only limitation is this will not work for partially transparent images.
If you want to use background-images (I prefer background-images as well for navigations) you could absolutely position a blank image over it by adding this CSS: position: relative; z-index: 100; to all of the navigation elements with background images and then putting this in them:
<img src="pixel.gif" alt="Text to display when images are off" style="width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 50;" />
Then, when the images are off, the alt text of the blank image will show. This image will be under the element, but when images are off, you will be able to see the image's alt text. Also, this will work for partially transparent background images.
You can use this pixel.gif image.
Hope this helps.
I am trying to get my gradient to sticky to the bottom of the page. It will work ok if the content requires scrolling ... http://jsfiddle.net/wDAQH/1/
but when the content is very short, it needs to stick to the bottom of the page, how can I acheive it? html, body { min-height: 100%; } doesn't seem to do the trick http://jsfiddle.net/wDAQH/2/
How can I get the gradient to the bottom of the content or screen whichever is larger?
You could try sticky footer - http://ryanfait.com/sticky-footer/ .
I used it on different projects and never had problems.
Replace body:after with html
html {
content: '';
display: block;
position: relative;
bottom: 0;
height: 120px;
background: -moz-linear-gradient(top, rgba(255,255,255,0), #d6d6d6);
}
Check working example at http://jsfiddle.net/wDAQH/6/
Another way you can do it is Put a <div> wrapper around the <p> tags, Add height:100% to your html,body tags, remove body:after And finally add the following div properties to your CSS
div{
height:100%;
width:100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0), #d6d6d6);
}
Check working example at http://jsfiddle.net/wDAQH/5/
i need this kind of effect in my project. there is a left corner floating red color strip. but i want to implement it for image using css. Please refer below image
http://www.w3.org/TR/xhtml2/mod-tables.html#sec_26.6.1.
you can use position:fixed; for a div.
Example code
css
#redBar {width:40px; height:200px; position:fixed; background:red;}
html
<div id="redBar"></div>
Demo http://jsbin.com/aqofa5
You can modify the background property to add your custom background image like background:url("the-path-for-the-image").
It is called fixed position. Here is css that accomplishes this:
.element { position:fixed; top:2%; right:2%;}
More info.
You can use a positioned div:
#myImgDiv
{
position: fixed;
top: 0;
left: 0;
background-image: url(path/to-img.png);
}
If it's an image related to content, it's best to use an <img> tag with an alt attribute within this div.
Let's say this is you DIV
<div id="alwaysThere"><img src="..."></div>
This should be CSS style:
#alwaysThere
{
position: fixed; /* or absolute if you want it to be fixed page top-left */
top: 0;
left: 0;
}
Use fixed position when you want your image to stay there regardless of page scrolling and absolute when you want it to stay top left on your page which means it will scroll when you'll scroll the page down.
The example you provided with a link uses fixed hence it stays there regardless of scrolling.
Pretty easy to be done, do the following:
div#divID
{
position:fixed;
top:0px;
left:0px;
}
This will give you the effect that this div will never leave the visible area of the browser.
Other position values are:
Static -- default
Absolute -- absolute in terms of the page, not the browser window
Relative -- relative to what it would be if the position was static
This is already an image. It doesn't use a floating div.
This CSS is used for the body:
background-image: url(http://www.w3.org/StyleSheets/TR/logo-ED);
background: white;
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;