Home : Forums : Authoring and Programming : Controlling Background Images and Colours

Controlling Background Images and Colours

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register
17-Jan-03 00:00
DeleteDelete EditEdit
Elated Elated's avatar Rank: gold
Gold
Posts: 292
From: Brighton, UK
This is a forum topic for discussing the article "Controlling Background Images and Colours":

http://www.elated.com/articles/controlling-background-images-and-colours/

Learn how to use CSS properties to add background images and colour to your Web pages. Lots of neat tricks and examples are included!
12-Mar-11 19:13
DeleteDelete EditEdit
wycan wycan's avatar Rank: none
No stars yet
Posts: 2
I have searched the web for weeks looking for this information - on some high-profile sites. One gives this bit, another gives that. But not one has given the vital set of codes needed to make things work. First, the 3 major codes for positioning an image. (I found the 50% 50% worked for me. Then the vital tip - including the body height as being 100%.

I am building an entire new site with a large background image as motif on most pages with a table superimposed. It seems to be working.

Thanks! This is a really useful site. I am grateful and majorly impressed!

[Edited by wycan on 12-Mar-11 19:15]
14-Mar-11 00:29
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
Thanks wycan - I'm glad my tutorial helped!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
09-Mar-12 04:55
DeleteDelete EditEdit
shashank shashank's avatar Rank: none
No stars yet
Posts: 2
great article! been searching for this for a long time.. is there any way how we can stretch the background image so as to occupy the entire webpage ?? the positioning of the webpage using 50% 50% worked right for me..but what i really want to do is fill the page background using the image.
09-Mar-12 18:16
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@shashank: See:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

eg:


background-size: 100% auto;


or:


background-size: 100% 100%;


You should also make sure your parent elements (eg html & body) have "height: 100%".

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
10-Mar-12 07:09
DeleteDelete EditEdit
shashank shashank's avatar Rank: none
No stars yet
Posts: 2
yes! works fine! thank you so much
20-Mar-12 01:29
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@shashank: Good to hear

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
 
New posts
Old posts

Follow Elated