I needed to turn my image into a hyperlink, so I wrapped the tag around it. For some reason, only the bottom part of the image is clickable for the hyperlink. The rest of the image won't do anything.
This is my code:
<img src="image-here">
change width or height may be that is the problem
Related
I was looking at the source code for this website and I'm stumped as to how the background image on the header is implemented. Using Chrome's inspection tools, I can find nothing inside the ``banner-area` div, and no image styles on the div of any sort. How do they do it?
Edit: As #makadlcik pointed out, it is the page-header div that has the background. But then how did they create the banner-area div that appears to be inside the image? I realize that it is impossible for HTML to be inside an image but Chrome's devtools make it appear as such.
It is the background-image property of page-header-wrapper div.
link of the background image: http://static.squarespace.com/static/51c50433e4b05645eb845ef5/t/51e592d9e4b047a5486b868d/1373999833147/Web%207.jpg
You probably meant that you cannot put an html tag inside an <img> element, because it is a single tag, but that is not this situation. They created a div as a parent with background image. A div is a pair tag, so it can contain a child.
I'm trying to build a website, so I used a Bootstrap template (this one). It's an empty template with just a background image that covers the whole page (I took the navbar away).
I just tried entering random text in the html body section, and then this problem appears.
Screenshot of the problem
The code from the template is untouched (besides deleting the navbar). I just added a common html paragraph.
I want to get rid of that white line, so only the text appears above the background, not the background. I've tried setting the body style to background-color: transparent, tried tweaking position, z-index and whatnot and the white line does not disappear. Googling has not helped.
I would appreciate your help of how to get rid of this!
The background colour of the content you've added is being computed from the background colour of the body tag.
The problem with that template is that the background image is being placed on the html tag rather than the body. You can try placing the full class on the body.
<body class="full">
Look at the font properties. If the font properties are clear, then back up and examine the paragraph, li, ul, block or div.
I use an alias without any width or height modifiers to display an image:
.. |downloads_png| image:: assets/index/downloads_v2.png
This image is rendered correctly, without any decoration.
I add a height modifier to resize this image:
.. |downloads_png| image:: assets/index/downloads_v2.png
:height: 26px
When I do this, my readthedocs page shows this image with a grey line underneath:
What is happening is that an anchor tag is (for whatever reason) being wrapped around the img tag for this image, and the anchor tag has a text decoration style applied to it, which adds the grey underlining.
How do I prevent this from happening? I do not need to download the image when mousing over it. I just want to display the image.
I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground, which is a transparent png, is there any way I can hide text as it scrolls underneath the fixed position element.
Here is a fiddle of what I have, so far
JS FIDDLE
Ideally I am wanting it so that when text moves behind the box with red borders it is not visisble, without the need for a background color.
I have visited your website and stolen some images to better understand what you are trying to accomplish.. Assuming i'm correct in the assumption you do not want a solid background on the header because it would mess with your pages background....
you can use multiple backgrounds...
see your demo
You will need something in #banner that will hide the text. From the css it looks like there is supposed to be a background image in that block, but it is not showing up.
The header is transparent as set in your css reset, so a color or image will be necessary if you want the text to be hidden. Otherwise, it's like moving the text behind a piece of glass...you will still see the text unless you have something to actually cover it.
I suspect if there was a working background image on the header, it would block the text where it wasn't transparent. When I add a background-color it achieves that effect.
I have a site where the page is formatted to be 800px wide with an image taking up the top 40 pixels. I wrapped the image with an anchor tag so that clicking on the image takes user to home page. When I wrap the image with an anchor tag, the image seems to shift to the right a little bit which throws of the alignment!
Is there a way I can clear absolutely all formatting from an anchor tag?
Must be the classic image border issue that adds a visible border to your image if it's a hyperlink. Try this (if you wish, edit the a img part to only target your header or the image ID or something):
a img {
border: 0;
}
David is right in his comment; Every style for the anchor tag (border, margin, color, :visited, etc) has to be individually undone. BoltClock's suggestion is sufficient for me, but for anyone else who truly does want to reset any tag, try looking at Yahoo's reset CSS (http://developer.yahoo.com/yui/3/cssreset/).