I just want to add a basic banner at the top of my tumblr website. The code (posted below) is just below the <body> part of the html, however I can't figure out why any img link that I put into the 'imgurlhere' section only shows up as a broken icon (see picture).
<a href=“myurlhere”><center><img src=“imgurlhere” width=“500”></center></a>
broken image icon that's showing up
My idea is to upload a short gif to tumblr, and then copy the code into the html so that it is placed at the top of my website as an advertisement. However, every url I put into the 'imgurlhere' section shows up as broken - regardless of advice I've found online stating that's all one needs to do.
I'm making sure to include the correct link, such as .png etc
And making sure to copy it straight from the 'copy image address'.
Any idea?
Thanks!
I think that setting width="500" in img tag was causing this issue.
-The best way would be to add a class and then set the width of the image.
.image{
width:500px;
}
</center>
Try using your image there and let me know if it works or not.Thank You
Related
I am using Google Blogger. I just changed template of my blog and choose a new one. But there is a problem with this one. My logo is not fully showing.
My website: www.pkgeek.com
The K of the logo is missing. I tried to find the code for the logo, but didn't find. I think the author haven't typed specific code for the logo.
I think the blogger it self is doing some customization.
How can i fix this ?
Your div is way too small for you Logo :).
Just go in your css file and paste this code.
'#header { width: 30%; }'
I put 30% in case you need to add some things on the right of your logo, if not, just put 100% it goes well.
Good luck ;)
#header needs to be set to width: 267px instead of 220px in your css
I am actually making a small website for my company, but i'm not good into HTML.
I am placing an image in background.
But i want some think special.
When someone is reading the site and go down, the image doesn't move.
But when we hit the end of this image's background, the image's background follow the user to the down.
I know the code for making it fixe, and making it following.
But i don't know how to
IMG go Fixe;
IF (End of IMG) {IMG go Follow;}.
If I understand your question correctly, you want a background of an image that has text over it and scrolls/moves with the page when the user scrolls down. If this is what you are asking, and please correct me if I am wrong, then some CSS will do the trick!
Since you are new to HTML, I will assume that you don't know CSS but you know HTML. So create a new file called 'stylesheet.css' inside of the same folder as your webpage. Between the head tags in your HTML, add the following line of code:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Now, in your HTML body, put the image inside and give it an id of "background". Do this by writing:
<div id="background">
<code for image>
</div>
Now open your .css file and add the following code:
#background{
opacity: 0.7;
position:fixed;
}
The opacity property makes sure people can see the text in front of it, and the position property anchors it to a position on the browser window.
For future reference, W3Schools.com is a great site for beginner web programmers.
Hope I helped, Justin
I have an css background-image that needs to be linked to the site index. However I cannot seem to be able to link it. I have tried using:
#header-bg {
background-image: url("./styles/duffcraft/theme/images/bg_header.png");
}
Then using:
But it didn't work. The url for the site is: http://bindmind.net/dev/
Its the image in the middle with the DuffCraft and etc on it. The file name for the image is header.png.
Basically it has to link to the site index but because ill be transferring this to another domain soon I can't have it linking to http://www.bindmind.net/dev/.
EDIT: I have managed to get it to link, but now there is a massive gap bewteen the image and the actual content. (fixed that.)
You should use instead of a background image a read image in your HTML code. It should look like that:
<a href="/">
<img src="./styles/duffcraft/theme/images/bg_header.png"/>
</a>
This should show your link as an image only, with the size of the image, and by clicking on the image, your index page will be shown.
you can do this:
<div id="header-bg"></div>
or probably you can do it with JavaScript
Topic explains it all. I've got it set as...
body{
background-image:url('images/bg.gif');
background-repeat:repeat-x repeat-y;
}
Can't seem to figure out why it's not rendering in the background. I'm new to wordpress themeing in general. Could anyone help me out? I've posted a link to the content in full below.
http://www.aidanchurch.com/blog/
In the style sheet, I see some garbage characters right in front of the
body{ background-image:url('images/bg.gif');
line in the css file. Those might be making the rendering skip the rule. I'd backspace and clean that up.
It looks like you background image is located here:
http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif
So first of all try an absolute address like so:
background-image: url('/blog/wp-content/themes/bloo_06/images/bg.gif');
However if that works, you really want a relative URL, so take a look at the directory structure of your theme and ensure the background image is indeed relative to the css file you have written that rule in, in the way you have written.
Check that you have uploaded the correct image to the correct place. When I tried to view the image I could see a very small and transparant image. http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif .
I have the following problem:
My landing page is composed of 2 images: a background image (top-banner) assigned to the body element and another image where I am presenting my content.
My problem is that both images are quite large and always, I have to wait for the main image to show up first, and than the background image.
This is very annoying for my and it does not look nice.
I have created an online version with sample images that clearly show my problem. Please check it: here
I have tried many different JavaScript techniques and online solutions, but none of them solved my problem.
All I want is the background image to show first, and than the main image.
Here is the html code:
<body background='top-banner2.jpg' style='background-position: top center; background-repeat:no-repeat;'>
<a href="#">
<img border='0' style='position:absolute; width:965px; left:50%; margin-left:-487px; top:440px;' src='main2.jpg' />
</a>
</body>
I am open to any solution, JavaScript, AJAX, whatever, just to see it working!
Thank you for sharing your time and expertise.
All the best,
Spiro K.
The problem is that you are using the background attribute. Never use that again, and stop using style attributes. Put all your presentation into an external stylesheet and link to it using a link tag. Doing this will solve your problem as the CSS renders progressively with the DOM.