18 replies [Last post]
Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 8 years 24 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

I have been searching around for days now looking for a way to add some repeating 10 pixel high by 100 pixel wide transparent png files to the right and left side of my document overlapping my repeating background image.

Can anyone direct me to how I should go about doing this?

Thanks much,
-d

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

MrRout
MrRout's picture
Offline
newbie
Last seen: 9 years 30 weeks ago
Timezone: GMT+5.5
Joined: 2011-01-20
Posts: 9
Points: 12

Can u elaborate what is the exactlly issue

you have a background which is already in your page, you need to overlap some image with 10 x 100 px right and it should coming from right to left.

If above state is you issue then ?

in css file

on you page background class file mention (position:raletive;) and make another css class which should have (position:absolute; right;0; top:0;)

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 2 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Bai Fan, you can use css3 for

Bai Fan, you can use css3 for this, or you can do it the more popular way.
apply the bottom background image to the html tag. then apply the second (this will be one img, not two) that goes over the other to the body tag.

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 8 years 24 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

Kinda...

The background image looks like this repeating....

and I want this image repeating down the left...

and this repeating down the right...

to create a vignette effect where the further away from the center you get, the darker the background.

Here is a link to my working file...
website

Thanks again for the help.

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Bai Fan wrote: ... Here is a

Bai Fan wrote:

...
Here is a link to my working file...
file:///F:/01_Self_Promotion/02_Website/3_0/index.html

We can't see your F: drive.

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 8 years 24 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

Yeah,

I edited the changes, but it needs to be approved or something. I meant to take it off of my tester page.

BG Image

Left overlay

Right overlay

and here is the tester site.

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 2 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

like I said before, make the

like I said before, make the left and right overlay one graphic. the center part of the graphic will be a solid white color, this is where your content will show up. The BG Image goes in your html tag, the the other in your body tag.

The image should look like this...
http://www.pixelbehavior.com/temp/BG.jpg

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 8 years 24 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

I am not understanding how if

I am not understanding how if I make the left and right overlay's one image I will get them to remain stuck to the sides when the browser is re-sized. Also, if I make the center a solid white, how will I get the transparency effect?

That sounds like it would be a good plan if I wanted my content area to be 800 pixels wide and white... and if I didn't care about the window re-size.

Is there any way what you are telling me will work for what I am asking that I am just not seeing?

The gradient needs to overlay the tiled background and my content is going to need to overlap the gradient overlays. There is going to be no white space anywhere on the site.

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Bringing the PMs to the

Bringing the PMs to the public side. There is something I don't like about this, an empty div. Sad I preach against it all the time so I can't let it stand. Perhaps someone can come up with a better idea but it's midnight and I've been up since early AM. It's just a start, I'll be back in the morn.

http://feelerdealer.com/vignette.html

edit - ugh! now i can't sleep and I can't think. Tongue Bah, it probably doesn't work in IE anyway. Wink

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 8 years 24 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

Ah. I am currently in

Ah. I am currently in Oregon.
Smile Only 9 here.

There are some cross platform problems when I do it that way.

AttachmentSize
banding.jpg 125.59 KB

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 8 years 24 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

cont...

If I could get them all looking like the firefox version (smooth and no banding), then it would be perfect. That is why I was opting to do it with images.

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Bai Fan wrote: If I could get

Bai Fan wrote:

If I could get them all looking like the firefox version (smooth and no banding), then it would be perfect. That is why I was opting to do it with images.

OK, go back to the example I showed then. The one with the images on the sides.

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 8 years 24 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

Yeah, I will play around with

Yeah, I will play around with that one. If I figure out how to do it right I will post the code on here for others.

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Ah, I woke up with a fresh

Ah, I woke up with a fresh mind. I'm not going to remove the first example in case someone comes up with a better plan for it. As it stands, I wouldn't let it anywhere near a production site, just a proof of concept with the inset box-shadow thing. Bah, presentational markup. Stare I put an H1 in there just so it wasn't empty. Tongue

Here's an example of using your three background images:
http://feelerdealer.com/vignette-images.html

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 2 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Bai Fan wrote: I am not

Bai Fan wrote:

I am not understanding how if I make the left and right overlay's one image I will get them to remain stuck to the sides when the browser is re-sized.

You never said you wanted this. My idea will still work, but now you need three containers, like Versch has done.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

CupidsToejam wrote: ... My

CupidsToejam wrote:

... My idea will still work, but now you need three containers, like Versch has done.

Yes, Cupe's solution is valid. It just needed one more container.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

If you're concerned about a

I just checked browser shots. If you're concerned about a solution that works with IE6 (personally, I'm not) then you'll have to include some sort of PNG fix.

http://browsershots.org/screenshots/a7889dceeeaa88be1f0766262842485c Stare

Either that or just zero out the transparent PNGs for IE<7

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 8 years 24 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

CupidsToejam wrote: Bai Fan

CupidsToejam wrote:

You never said you wanted this. My idea will still work, but now you need three containers, like Versch has done.

Yeah, I did...

Bai Fan wrote:

...some repeating 10 pixel high by 100 pixel wide transparent png files to the right and left side of my document...

...but I can see how it could have been misinterpreted. I will try to be a bit more clear next time.

:Verschwindende:
I checked out the example, and it is looking pretty good. I am not worried about IE, because I never use it... but since I am going to be using the site as a portfolio page to help me get hired, I want to make sure that it looks as good as possible in case the company I am applying to uses ie. I think going with your idea to just zero it out is the best bet.

But now it is almost 8am and I am getting a bit tired. I am going to get away from animating and try to unwind before getting a bit of sleep.

Thanks again for the help, I really appreciate it. Let me know if you have any questions or needs with some graphics problems.

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake

Bai Fan
Bai Fan's picture
Offline
Enthusiast
Los Angeles
Last seen: 8 years 24 weeks ago
Los Angeles
Timezone: GMT-7
Joined: 2011-01-22
Posts: 59
Points: 68

Update...

I found some fun gradient stuffs, so if anyone is interested in using them,
http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

It also shows how to add the gradient to the drop-down menus.
http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/

Freelance: Artist, Graphic Artist, Animator, Photographer, Illustrator
Software: Adobe: Photoshop, Illustrator, After Effects, Premiere
Autodesk: Maya 2009, Mudbox 2009 Other: Zbrush 4.0, Shake