Apr
11
2011

Web Design Tutorial – CSS Backgrounds

Nick and James form Creare demonstrate the basics of implementing backgrounds in CSS for you website. The tutorial covers standard colour, tiling a graphic, applying gradiants and fixed graphic backgrounds. Check out the supporting blog post at www.crearedesign.co.uk
Video Rating: 4 / 5

13 Comments+ Add Comment

  • Great video once again guys! 5/5

  • I’m trying to create a background in PS for my blogger blog. What dimensions would I need to create my background to fill the whole screen without tiling? Or is that possible? Do you guys have any tuts on this? I know this is a very popular subject amongst bloggers tyring to customize their blogs. Thx! Great tut by the way.

  • Hi skept725. This isn’t an easy question to answer because screen resolutions/monitor sizes vary.

    I would make it 1200 pixels wide by 1000 high as a good starting size.

    If you can apply CSS to your blog’s background, then you can use the no-repeat attribute to stop the background from tiling.

  • good video but number four, creating a fixed background, is kind of wrong.. fixed backgrounds have a: background-attachment:fixed; in the CSS code and then you can position it, this prevents it scrolling when you use the scrollbar.

  • i made like a CSS-“hack” using “alpha” to get a gradient background (its normaly used as s text-effect). This would eliminate the use of images and looks OK. Though it works in IE im not sure about cross-browser support.

  • Anyone here knows what is the best web design right now???

  • the best design is always the one that is most user-friendly for the targeted user group and doesnt interfer with the information… in general a good rule to me is always “less-is-more”

  • Thanks for the discussion.Really gained a lot of knowledge from it.

  • @Flain33 thats what i’m trying to do. have a background image fixed in the same position even as you would scroll down but for some reason it doesn’t stay in place. Ive tried switching the setting to background-attachment:scroll but it still does the same thing.

  • Very kind Latino Lady for marriage **rockmycity.info**

  • latino wives waiting **rockmycity.info**

  • If you want to see some REALLY awesome web design stuff,||Want to see some seriously cool web design stuff?} look at ww w. interkiwi web developers . c om. Some pretty cool stuff there}.

  • what type of software are you useing??