Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Vector BG

Featured Replies

Hey guys,

 

ok being tryin to find out how you can make vector backgrounds. the key is to have the top a certain image then the bottom a different image. There is a guy on here with an avatar R but i cant seem to find his site now he has starts at the top with rockets then something else at the bttom from memory.

 

I am wanting to be able to do this myself. I really need info on the css then the graphics can come later.

 

Hope this make sense thanks for the help in advance.

 

Kovy

 

Edit: Found the site its like Robs, http://rawkes.com/

I'm not really sure what your problem is, do you mean a streachy background? unless it is flash or silverlight i doubt it is actually a vector because only firefox supports vectors as far as i know.

I have just used a vector illustration background on a site.

I created it in illustrator then imported it into photoshop. Sliced it and then saved it as a png.

I have just used a vector illustration background on a site.

I created it in illustrator then imported it into photoshop. Sliced it and then saved it as a png.

 

 

it may have been a vector illustration but png is not a vector format so it is no longer a vector image and so behaves like a bitmaped image

it may have been a vector illustration but png is not a vector format so it is no longer a vector image and so behaves like a bitmaped image

 

 

I think your missing the point. The term vector is being used here to denote a illustrated background made with a vector program. Granted its no longer a vector image on the webpage (because the best way to do that is raster.. unless you want to go the SVG route), but in this case it would be best to look past the literal meaning of the word vector and just realize that the topic is about illustrated backgrounds.

Hey guys,

 

ok being tryin to find out how you can make vector backgrounds. the key is to have the top a certain image then the bottom a different image. There is a guy on here with an avatar R but i cant seem to find his site now he has starts at the top with rockets then something else at the bttom from memory.

 

I am wanting to be able to do this myself. I really need info on the css then the graphics can come later.

 

Hope this make sense thanks for the help in advance.

 

Kovy

 

Edit: Found the site its like Robs, http://rawkes.com/

 

You mean this guy?

 

http://www.webdesignerforum.co.uk/index.php?showuser=3039

I think your missing the point. The term vector is being used here to denote a illustrated background made with a vector program. Granted its no longer a vector image on the webpage (because the best way to do that is raster.. unless you want to go the SVG route), but in this case it would be best to look past the literal meaning of the word vector and just realize that the topic is about illustrated backgrounds.

 

 

no i'm not missing the point at all i understand that the topic is about background images but it is wrong to call it a vector background because it is not feasible and there for doesn't behave like a vector and doesn't have its advantages. i think u should understand that it will not be a vector background.

  • Author

To calrify i mean a vector style image. a vector peice that then has being turned into a jpeg or png. I said vector bg as the orginal image would of being made as a vector graphics, if i put jpeg background this could mean anything.

 

And the site that had the style i wanted can be found here http://rawkes.com/ the way he has the background is what i want. Is this split by 2 images with a fill in between?

 

Thanks for the comments

Like I said.... create the vector in a program like illustrator. Import into a graphics program such as photoshop, gimp etc. Slice into header, body and footer and save the images as png, jpeg etc. That is how I do it.

  • Author
Like I said.... create the vector in a program like illustrator. Import into a graphics program such as photoshop, gimp etc. Slice into header, body and footer and save the images as png, jpeg etc. That is how I do it.

 

thanks so do u set say the footer div bg as the image you want to get that affect?

 

I think i have figured it out, so you have a header set the bg there then have a main and set that background then have a footer with a bg?

yeah he has just broken the background up into three elements on one layer and then the rocket is on a new layer on top of the first and largest element of the first layer.

yup.

For each, a seperate div in your html and then background image in css. easy peasy. If you need a more thorough explaination, just ask :)

  • Author
yup.

For each, a seperate div in your html and then background image in css. easy peasy. If you need a more thorough explaination, just ask :)

 

thanks for the help guys.

 

i will give it ago this next week helen and see how it goes. will get back to you if i need some help.Cheers.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.