How can I do to have an image as the background for all links? I want to have a nice box representing buttons, but I cannot figure this out.
I have tried:
a {
font-size: 40px;
background: url('images/shooting-stars/shooting-star-link.png') no-repeat left top;
}
But this is not working, image is not displaying.
"I want to have a nice box representing buttons, but I cannot figure this out." - I don't understand this part.
Anyway, your css looks fine from here, are you sure the image exists? This is a working example with the exact same code, just an image that I'm sure exists:
http://jsfiddle.net/3k9nm/
If you want to always show the image, even if the text is shorter, you should set a minimum width for the links. This does mean they'll have to be inline-blocks, you can't set width on a regular link (which is an inline element).
a {
display: inline-block;
min-width: 25px;
}
(25px was randomly chosen, fill in the width of your background image..)
Two things to try, is there any text in the actual <a> links? And if you use Firebug, you can check you've definitely got the right file path to the image...
HTML
<div id="example-link">
Link to journal article
</div>
CSS
#example-link a {
background: url('images/shooting-stars/shooting-star-link.png');
}
Related
There is a black space where the IOS status bar is. I cannot figure out how to get that space to fill up using CSS.
Here [1] is a screenshot of how it looks on an iPhone when the webpage is loaded.
The status bar space does not inherit/match the background image or the background color.
This is the code down below that I have for the background image.
body{
font-family: 'Inconsolata', monospace;
background: url("./Components/Images/back.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
} ```
[1]: https://i.stack.imgur.com/y3Lwp.jpg
https://www.youtube.com/watch?v=plOl7TNc89A
I'm not sure what your exact issue is since you didn't provide a working example (please update if this doesn't solve it), but it sounds a lot like the issue desribed in the video above. tl;dr is that images are inline elements by default and they put a default buffer below them to allow them to line up with the main parts of a line of text and not the parts of text that drop below the line on which text is written. To fix this, you can override the default display and use
display: block
for your individual img element to remove space below the image.
Some other problems could be the presence of margin or padding on your element (set those to 0, if needed) or the way the image is saved. Re-save the image from your image software using save as an not as save for web.
also, I'm not sure what your exact issue is but if it is concerned with the default spaces in css please add
*
{
box-sizing:border-box;
padding:0;
margin:0;
}
to reset default properties I hope this helps
I got an Image which is 400px x 685px. In the website, i set it will only show 200px x 685px. I want to know how to show the whole image when the mouse hover the image and show another half of the image 200px x 685px to 400px x 685px? Thank you
So I think a part of your css may looks like:
.your-class {
background: url("[the path of your image]");
background-size: 200px 685px;
}
then for when the mouse hover the image:
.your-class:hover {
background-size: 400px 685px;
}
Note that if you're using the <img> tag itself in your .html file, then you should write width and height instead of background-size. Anyway The code above is somehow what developers do in css in this case. But obviously it really depends on how you've structured your HTML with div tags and also the classes you've given to these tags.
you achieve by set
.selector:hover
{
background-size: 100% 100%;
}
I think an acceptable solution would be to create a div in your html. In your style sheet (aka - css file) you should define it with width:200px, height:685px; the next thing you want to do is to set all divs tags (or any id you give this fella) a background-image:url("whatever.png");
Now, you should also use the background-position:right (or left, your choice).
whta will happen so far? Your div will show half an image.
Now you should use div:hover as a new set of rules in your css, and there also use the background-position:left/right (the one you didnt use).
Tell me if it works.
I have searched for quite a bit and tried lots of stuff to fix this issue, including hiding the overflow in css.
I have an image that is linked to a video, for which the clickable area overextends the image, but only on the right side.
Relevant class: .overflow a (this was added as an attempt to fix from another answer)
Why is this clickable area so large, and how do I make it the same size as the image it encapsulates?
Firebug doesn't show anything out of the ordinary..
Your image is displayed as block, so it takes up the full width of the parent. You'r solution would be this.
.overflow img {
display: inline-block;
}
Try adding below CSS code:
.overflow {
display: inline-block;
}
This website (click) should look like this website here (click) for the most part. The first link is in BVCommerce cart, the second was the initially designed HTML and CSS. You'll notice on the first link the center content is slightly off center as well as missing the background with the shadow, which is my main issue. (The image that should be showing up is images/bg.png)
There are a few bugs with the first website but I'm really just trying to get this background to show up properly.
First website CSS: justicejewelers.com/css/styles.css
Second Website CSS: justicejewelers.rcmhosting.com/css/styles.css
First Website Image: justicejewelers.com/images/bg.png
Second Website Image: justicejewelers.rcmhosting.com/images/bg.png
UPDATE
I've combined the bar and background gif to save some heartache. But any ideas on how to get the whole center area shifted to the right properly?
I do not know about your main issue, but on the first page I would change the text inside the head. Search robots such as Google will often ignore pages with too much information in the head due to spam protection.
I believe you have something like this in the CSS:
.wrapper { background: url("images/bg2.gif") repeat-y scroll center top transparent; padding-top: 0; }
and it overrides this:
.wrapper {
background: url("../images/bg.png") repeat-y scroll center top transparent;
padding-top: 0;
}
About background error, Firebug shows no-repeat :
/BVModules/Themes/Painted%20Paper/styles/styles.css :
url("../images/bg.png") no-repeat scroll left top transparent;
Also, your #maincontent div is smaller than the width of the background image (you have no padding in the first website (1016 pixels versus 960 pixels)
I guess you should remove /BVModules/Themes/Painted%20Paper/styles/styles.css CSS link
and give a try to a helper like Firebug :)
So I'm trying to do a sliding door CSS menu -- basically one image that you move the background position on when it's hovered or when it's active.
However, usually when I move to the next link using:
#xmenu li.ypart {width:80px; height:35px;}
#xmenu li.ypart a {background-position:-33px 0px; }
It takes from the last link to whatever width I specify. See the MAP icon on the image below? I'm trying to link it so that the link doesn't go all the way from the SEND FEEDBACK link to the map button. I just want the link to be that square.
So any ideas?
If I understand correctly, you should make the link (the <a> element) a block element and give it a specific width and height (and maybe relative/absolute positioning, depending on how your layout is set up). That way, the hit area for the link will be confined to those dimensions.
Something like this for the markup:
...
Map
...
And something like this for the CSS:
#xmenu li.ypart a { display: block; width: 40px; height: 35px; }