I need a big banner at the top of the screen going from end to end. It has to be a link and on the banner is an image. I have all that set up and working. However, around it all is a gray box and in the top left corner is the icon that is displayed when no image is found. How do I remove the box and the icon?
header.php
<body <?php body_class(); ?>>
<a class="vcuLink" href="http://www.vcu.edu/" >
<div id="topBanner" class="vcuBanner">
<img class="vcuLogo" src="vcu.png" width="910" height="59">
</div>
</a>
<div id="page" class="site">
<div class="site-inner">
I do not think showing more is necessary.
style.css
.vcuBanner {
position: relative;
background-color: black;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 62px;
top=0;
}
.vcuLogo {
position: relative;
background:url(vcu.png)no-repeat center;
height: inherit;
width: inherit;
z-index: 101;
}
EDITS: More information and a screen shot.
When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing. However, when the img tag is there so is the weird icon and outline, leading me to believe that the img tag is the culprit.
Screenshot:
In the VCU banner at the very top, you can see what I am talking about. In Internet Explorer, the icon at the top left is an X button instead and there is no outline.
There are many possible causes for this, so I’ll try an educated guess at what seems the most likely cause.
I don’t know where your files are located relative to one another, but the way your markup and CSS here is written, the file vcu.png should be in the same folder as the PHP file where you’re displaying it (presumably index.php, given the URL in your address bar) for the <img> tag to work. Similarly, it must be in the same folder as the CSS file for the background declaration to work.
Since the position of the <img> tag itself is not specified in your CSS, it should show up in the top left corner of the container. The background image is centred, so it should show up in the centre. Given that there is an image in the centre and a missing image icon on the left, it would seem it is the HTML <img> tag that points to a nonexistent file. That in turn means that the PNG file is in the same folder as the CSS file, but in a different folder than the PHP file. Perhaps the CSS and PNG files are in a subfolder called style or something like that?
When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing.
This makes sense. Since the CSS-defined background is declared on the image tag (not the containing <a> or <div>), removing the tag from the HTML markup naturally also removes the background image. Conversely, since the HTML tag is pointing to an incorrect path, having the tag there also means there will be a missing image icon.
You can solve this in two simple ways:
Figure out where the image is located relative to your index.php file, and make sure you point to the correct location (perhaps src="style/vcu.png" or something like that). Then style the <img> tag with something like margin: 2px auto; to centre the image and give it a couple of pixels of space at the top and bottom, and get rid of the background declaration in your CSS.
Remove the <img> tag from your HTML altogether, replace it with (to make the containing <a> non-empty), and style the container to be display: block.
The first yields more semantic code and would be my preference; but both should render the same in regular browsers. Removing the <img> tag also removes its alt attribute, however, so users relying on text-to-speech systems will have no way of knowing what that link actually does, since the only meaningful content it will contain is a non-breaking space.
Related
I am trying to put a background on a div using a method that I've been always using ever since. But for some reason, it isn't working. These are the things I tried:
Checked the syntax, its correct
Checked the path or typo, although I copied the path from the security tab in the properties of the image
Putting different elements inside, even though I already have sub divs inside.
I also tried this property to other divs and the body, still nothing.
I removed the bg image property and tried bg color instead, it worked.
CSS:
#menu-container{
width: 100%;
height: 800px;
margin-top: 760px;
background-image: url("C:\Users\aaron\Desktop\MODULES\WEB301\WEB301(HTML)\media files\bg.png");
}
You cannot load an image from C:\
However if you add file:/// to your path like file:///C:/Users/.....jpg this might work in some Browsers (not all). Otherwise you will have to use relative paths. This means you reference the JPG in relevance to where the HTML or CSS file is sitting.
Read this for more details about relative pathing.
http://www.facebook.com homepage when displayed in firebug shows that the image/icon of "facebook" on the top left corner has the following HTML:
<i class="fb_logo img sp_ezjerk sx_440431">
<u>Facebook logo
</u>
</i>
Even the media resource list does not show any image/icon in png/ico/gif for the "facebook" image that appears.
I have tried searching for that logo source even in chrome developer tools, but I am unable to locate it.
Firstly, where does the text logo come from?
Secondly, why is it placed under the < i > tag which is primarily used for italicized text.
A quick inspection of that i element shows the following CSS classes being applied:
img
sp_ezjerk
sx_440431
The latter two appear to be dynamically generated and change with each page load.
The first of the latter two, on each page load, shows the following CSS rules:
background-image: url("/rsrc.php/v2/yR/r/7TyBDSy09g8.png");
background-repeat: no-repeat;
background-size: 104px 488px;
display: inline-block;
height: 32px;
width: 24px;
The image file at /rsrc.php/v2/yR/r/7TyBDSy09g8.png contains the logo, and the CSS is positioning it to display only that portion of the image.
As for why they chose an i element, that is beyond me. I wouldn't have chosen it, but I guess they did.
Not sure what I'm doing wrong here, but I've tried following the example on the relevant w3schools page, but to no avail. So here's what I have so far:
I have four images on my index page, called index1.png, index2.png etc. I combined them into a single png, which is simply index.png. That's my sprite image. I also have a 1x1 transparent image, which is the placeholder for each image in the HTML. Here is the image code:
<img class="index1" src="Images/trans.png" alt="alt" title="title" width="40%" />
And the CSS:
img.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}
Testing the page out, I get nothing more than a resized transparent image. The image I want displayed does not show up.
EDIT: Solved. I was an idiot and forgot to go up one directory in my CSS, since my CSS was in a folder on the root. The proper path was "../Images"
Are you sure the path to your images folder is correct? Make sure your path for your sprite is relative to your CSS file, not from where the CSS file is being linked from.
If you had a folder structure like this:
/index.html
/css/style.css
/images/sprite.png
/folder1/index.html
/folder2/subfolder2/index.html
The correct path to use in your CSS file would be this: ../images/sprite.png.
The path would be the same in your CSS file regardless of which index.html file that you would be including it from in the example above.
First and foremost, seeing as though you're using a sprite <img> isn't the correct tag. A div will suffice here. You also don't need to target HTML in your CSS as you've set a class. Try...
<div class="index1"></div>
Also your image url is missing quotation marks.
.index1 {
background-image:url('Images/index.png');
background-position: 0 0;
height:300px;
width:258px;
}
Try using an element other than <img>. A <div> element should work fine.
<div class="index1" alt="alt" title="title" ></div>
And the CSS:
.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}
I`m want to make a sprite image, this is my css:
img.Bayern
{
background: url(Images/Popular.png) no-repeat;
width: 14px; height: 11px;background-position: 0 0;
}
and my html:
<img class="Bayern" />
But the image is not displayed, however when i place the css code inside style="" , it works properly.
I checked this similar question: CSS code works if put in style="", fails if put in external css file
and did put the img inside:
<span id="nav-flag">
<img class="Bayern" />
</span>
#nav-flag img.Bayern { ...same css...}
But it still doesnt work. Also i changed the relative path to: ../Images, ./Images, into '...'.
Does anybody knows what im doing wrong??
You're using a relative URL on background image Images/Popular.png (i.e. the URL did not start with a leading slash / nor the scheme like http://).
When using such a relative URL in style attribute, it's relative to the request URL of the webpage as appears in the browser's address bar. So if it's for example http://example.com/page.html, then the image is expected to be in http://example.com/Images/Popular.png.
When using such a relative URL in a CSS file, it's relative to the request URL of the CSS file itself. So if it's for example http://example.com/css/style.css, then the image is expected to be in http://example.com/css/Images/Popular.png.
You need to make sure that the image file is exactly there where the specified URL expects it to be (so, put it in same folder as the CSS file), or you need to fix the URL accordingly so that it's properly relative to the request URL (so, use /Images/Popular.png instead).
Unrelated to the concrete problem, it's quite strange to specify a CSS background image on an <img> element. You normally specify that on some block element like <div>.
I have taken over a website that was coded in tables (looks like DW) and is half coded in typo3 CMS and half hard coded.
Anyway, my boss has asked me to make the logo clickable to link to the homepage from every page that the logo shows. The problem is that the logo is part of the whole image that makes up a third of the page, so linking the whole image is out of the question.
I don't want to have to restructure and slice the images to separate the logo from the BG image, so is it possible to place a link section over the logo only?
I thought about an empty div that sits over the logo section only with a link tag that fills it 100%, is this possible and would it work? The site is here http://overbeckanalytics.com/typo3/menu-top/about-us.html... you can save the BG image and see its not just the logo...
Please tell me how I can make a link that sits over the logo only on that image.
Is the background image on the <body> element? If so, this should work:
<body>
Example Company
</body>
With this CSS:
a#logo_link {
position: absolute;
display: block;
visibility: hidden;
left: 42px;
top: 42px;
width: 42px;
height: 42px;
}
Note the <a> tag needs to be directly inside the <body> tag, or else the position may be incorrect. It can be anywhere in the body tag however, at the beginning or the end.
I've also placed the company name inside the link, since it's a bad idea to have a link without any text. A blank link cannot be understood by browsers designed for disabled users, and it may trigger spam algorithms in search engines. The visibility property will make the link invisible, even though it is still there and can be clicked on.
I provided an example answer. If you're allowed to load a JQuery library and can place the anchor somewhere on the page.
http://jsfiddle.net/XFvQD/
You would be looking for something like this:
<html>
<body>
<img src="http://listphobia.com/wp-content/uploads/honda-v4-concept1.jpg"/>
</body>
</html>