static background logo:?

  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

My logo image is a gif image and i want to place it on my website in such a way that even if i scroll the page then also the logo should not appear to scroll and should remain in the center of the page then how to do that and what language should i use ? I mean how to do that ?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • pbrasilbr_brasil
  • Novice
  • Novice
  • pbrasilbr_brasil
  • Posts: 18
  • Loc: Brazil

Post 3+ Months Ago

its easy
well...i will say the method when you're using CSS
you have
background-image:url(yourfile.gif)
/* after this , you use
background-attachment: fixed

i think thats the command...well
hope it helps...bye
Pablo =)
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Code: [ Select ]
body {
background-image : url(images/back.gif);
background-attachment : fixed;
background-repeat: no-repeat;
background-position: center;
}
  1. body {
  2. background-image : url(images/back.gif);
  3. background-attachment : fixed;
  4. background-repeat: no-repeat;
  5. background-position: center;
  6. }


or the shorthand equivalent:

Code: [ Select ]
body {
background: url(images/back.gif) no-repeat fixed center;
}
  1. body {
  2. background: url(images/back.gif) no-repeat fixed center;
  3. }
  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

I have done that but it doesn't display the image. My img. is in /var/www/cgi-bin/ .

Do i need to chmod the img. if so then what?
  • Cold Canuck
  • Proficient
  • Proficient
  • User avatar
  • Posts: 400
  • Loc: Michigan, U.S. of eh

Post 3+ Months Ago

Move the image to a separate folder...the usual is a level below where the html docs are located:

html folder
>>images


C.C.
  • pbrasilbr_brasil
  • Novice
  • Novice
  • pbrasilbr_brasil
  • Posts: 18
  • Loc: Brazil

Post 3+ Months Ago

Oh well
There was no need of all that commands, only attachment would work but its good,heh...its good to learn anything about CSS...you never know when its going to be useful :)

And...i am sure you know it.
Lets suppose you're in your site's root folder...

you know that a "/" its up level...
and "../" down level

like...i am on root/images/background
i want to display an image who's in that folder in a file that's in the folder
so i would use <img src="/images/background/image.gif">
see...i gone two levels up
If i wanted to do the reverse...display a image who's the root in the background folder,i would use in a file that's in the "images/background" folder...look the command
<img src="../../image.gif">
See...i gone two levels down...

Maybe this is what you need...
If nothing works , so...just put the image in a normal folder,like not a cgi-bin folder

well...hope it helps
Pablo =)
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

pbrasilbr_brasil wrote:
There was no need of all that commands, only attachment would work

That's not the way I read his post. He specifically said he wanted it centered hence the addition of the center property. He also said it was a logo image so I doubt he wanted it to repeat horizontally. It also seems unlikely that a logo image would be repeated vertically if it is fixed and centered hence the addition of the no-repeat property.

I always keep my images in a subdirectory called images, so I automatically used url(images/back.gif) which will work fine if the image is in an immediate subfolder (named images in this case) of the folder that holds the document itself. I'm not sure if putting the image in the cgi-bin folder would cause problems as I've never actually seen anyone do that.

:)
  • pbrasilbr_brasil
  • Novice
  • Novice
  • pbrasilbr_brasil
  • Posts: 18
  • Loc: Brazil

Post 3+ Months Ago

Well...we have different ways of compreend things
I am not going to discuss this...maybe you're right. =)
just it...
Bye
Pablo =)
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Well, people often have different ways of comprehending things Pablo.

However, refusing to discuss or elaborate on our suggestions doesn't help anyone. I've been wrong before, and I'm quite certain I will be wrong again, but I will always be willing to discuss the matter.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

if the CSS is in an external file I think the image path must be relative to the directory the CSS file is in (as aposed to the html file).
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Yes, good point. I was thinking in terms of an embedded style sheet.
  • Cold Canuck
  • Proficient
  • Proficient
  • User avatar
  • Posts: 400
  • Loc: Michigan, U.S. of eh

Post 3+ Months Ago

One thing to remember about the previously mentioned CSS, is that older browsers will not understand the style, and probably jam the image at the default upper-left position.


Just so you know, eh...


C.C.
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

I realize that your subject is "background logo", but its worth mentioning that foreground objects can be fixed positioned.

This example places a GIF image 5px from the top and left of a document page and forces the image to remain relative to that position; regardless of scrolling.

Code: [ Select ]
<img src="logo.gif" alt="" border="0" style="position: fixed; top: 5px; left: 5px;">
  • the_Maven
  • Graduate
  • Graduate
  • the_Maven
  • Posts: 196

Post 3+ Months Ago

i suppose you could use what i call absolute addressing, for example:

<img src="www.site.com/var/www/cgi-bin/logo.gif" ... >

that usually works for me.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

I'm pretty sure absolute addressing is done this way:

/pics/folder/img.jpg

If you want to go forward a folder:

pics/folder/img.jpg

If you want to go back a folder:

../pics/folder/img.jpg

I could be wrong, but I'm pretty sure I'm not.

Also, though Netscape 4 has problems with CSS, most of the browsers in use these days have decent support for it. Anyway, build for the future. Of course, take a few precautions for old browsers, but don't let them hold you back.

The shorthand CSS RichB posted was right on the money. Short and efficient! 8)
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

you might find that position: fixed; doesn't work in the most common browser - M$IE

Fortunately I have a CSS + JavaScript work-arround (the javascript could also be embeded inthe CSS if you really want).
http://dev.jdenny.co.uk/css/ie_fixed.html
  • toppsoft
  • Born
  • Born
  • toppsoft
  • Posts: 1

Post 3+ Months Ago

the_Maven wrote:
i suppose you could use what i call absolute addressing, for example:

<img src="www.site.com/var/www/cgi-bin/logo.gif" ... >

that usually works for me.


Absolute links only work if prefixed with http:// Otherwise you end up going to
Code: [ Select ]
http://www.site.com/<current directory>/www.site.com/var/www/cgi-bin/logo.gif
which obviously won't work. :oops:

[edit] .. and I just replied to a six month old thread.. :roll:
  • suzie
  • Guru
  • Guru
  • User avatar
  • Posts: 1134
  • Loc: England

Post 3+ Months Ago

On some web sites you see a background image, just an outline not like a normal picture.
Anyone know how to achieve this effect.
Thanks.
:)
  • Digitelle
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122
  • Loc: BRKLYN-NY

Post 3+ Months Ago

Do you have a link to this so that we can see what you mean?
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

LazyJim wrote:
you might find that position: fixed; doesn't work in the most common browser - M$IE

Fortunately I have a CSS + JavaScript work-arround (the javascript could also be embeded inthe CSS if you really want).
http://dev.jdenny.co.uk/css/ie_fixed.html

Very nice!
  • suzie
  • Guru
  • Guru
  • User avatar
  • Posts: 1134
  • Loc: England

Post 3+ Months Ago

Sorry its took me ages to find what comes close to what i'm after doing on a web page.
Please scroll down to the very bottom, this is what i mean for my image.
Thanks.
http://www.netscr.com/main.shtml
:)
  • Digitelle
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122
  • Loc: BRKLYN-NY

Post 3+ Months Ago

That bar is a jpg that has had the opacity taken down in a graphic editor like photoshop.
  • suzie
  • Guru
  • Guru
  • User avatar
  • Posts: 1134
  • Loc: England

Post 3+ Months Ago

Thanks for getting back to me Digitelle,
I'm not that clever with pshop lol except for cropping the odd image. can i not do that background image like that in Dreamweaver - maybe a script or tag or something...just learning dw.
Thanks.
:D
  • Digitelle
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122
  • Loc: BRKLYN-NY

Post 3+ Months Ago

well you could also do it using css if you wanted to.

in the html page name the put this code with your img tag

<img src="pic.gif" class="outline">

then in your css sheet add this code

img.outline{
      FILTER: alpha(opacity="50");
}
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

But wouldn't that only work in IE? Or do other browsers support filters?
  • suzie
  • Guru
  • Guru
  • User avatar
  • Posts: 1134
  • Loc: England

Post 3+ Months Ago

Thanks Digitelle,
:)

gsv2com hopefully Digitelle will answer your question.
  • Sumen
  • Proficient
  • Proficient
  • User avatar
  • Posts: 421
  • Loc: Rochester or Albany, NY

Post 3+ Months Ago

Im pretty sure filters only work in IE.
  • Digitelle
  • Graduate
  • Graduate
  • User avatar
  • Posts: 122
  • Loc: BRKLYN-NY

Post 3+ Months Ago

yeah it would only work in IE, but suzie wanted to know an alternate way to make a low opacity image than making it in photoshop. I would do it in photoshop, it is easy and painless, and you are practically guaranteed to get the effect you want on any browser anywhere.

Post Information

  • Total Posts in this topic: 28 posts
  • Users browsing this forum: No registered users and 66 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.