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.
Related
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
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
I am having a problem with some links I have made in Dreamweaver; I have made these links by putting the web address onto the link field in Dreamweaver.
But when I preview in browser the whole image does not turn into a link, only the bottom part of it does. So when I hover my mouse over the image, only at the very bottom of the image it turns into a hand.
The code for the page is here http://jsfiddle.net/BGpu8/ and the links with this problem are at the bottom of the page - Facebook, Twitter etc.
Any ideas on why this is happening would be much appreciated! Thank you in advance!
It should really be marked up like this:
<div id="fb"> <p><a href="http://www.facebook.com/group.php?gid=232587661141"><img src="graphics/social graphics/facebook.gif" width="31" height="31" alt="Facebook Logo" />
Find Us <br />on Facebook</a></p></div>
Put inline elements like anchors and images inside block level elements like paragraphs. In the DreamWeaver generated code it had the anchor in there twice and other wonkiness. If you have time you should take some of the other posters advice and try to learn by hand.
please check if you missed to provide "display:block;" css property to your anchor tag.
try to code like this,
<div class="fbIcon"> </div>
and corresponding CSS as:
.fbIcon{
background:url(ur image url);
height:xx px;
width: xx px;
}
.fbIcon a{
display:block;
}
Now it shud work!
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 .