Web Design Forum: Background - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Background Different color either side of the web page

#1 User is offline   David.Coutts 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 1
  • Joined: 22-January 12
  • Reputation: 0

Posted 22 January 2012 - 07:03 PM

Hi i am new to web design and im creating a website, but i want a two strips either side of the webpage for example this page has two grey strips either side, could someone help please????
0

#2 User is offline   Luked 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 7
  • Joined: 03-November 11
  • Reputation: 0
  • Gender:Male
  • Location:Sheffield
  • Experience:Beginner
  • Area of Expertise:Web Designer

Posted 22 January 2012 - 08:39 PM

This forum has 2 grey strips either side because the main content goes over it.

You'll just have to edit your background colour to grey and make sure your content is centered to the middle of the page with a different colour.
0

#3 User is offline   mantis 

  • Dedicated Member
  • PipPip
  • Group: Members
  • Posts: 201
  • Joined: 29-May 11
  • Reputation: 5
  • Gender:Female
  • Location:Oooh la la land
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 23 January 2012 - 10:18 PM

you can add a background to any of the elements using css. For example:
<html>
<head>
<style type="text/css">
html{
  background-color: #DDD
}
p {
  width:100px;
  color: blue;
  margin: 0 auto;
}
body {
  margin: 0 auto;
  background-color: #FFF;
  width: 80%;
}
</style>
</head>

<body>

<p>site goes here</p>

</body>
</html>

0

#4 User is offline   Jack_the_dweeb 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 3
  • Joined: 24-January 12
  • Reputation: 0

Posted 24 January 2012 - 07:55 PM

Try using <table> or <div> tags. Good tutorials: W3Schools tables/divs
0

#5 User is online   MikeChipshop 

  • Small but imperfectly formed
  • Group: Moderators
  • Posts: 7,046
  • Joined: 19-April 10
  • Reputation: 503
  • Gender:Male
  • Location:Scotland

Posted 24 January 2012 - 08:42 PM

That single page marks out what is wrong with W3Schools. I mean, tables or layout... Pleeeeeeease!
1

#6 User is online   jamesosix 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 446
  • Joined: 16-June 10
  • Reputation: 20
  • Gender:Male
  • Location:South Wales
  • Experience:Intermediate
  • Area of Expertise:SEO

Posted 25 January 2012 - 12:14 AM

View PostMikeChipshop, on 24 January 2012 - 08:42 PM, said:

That single page marks out what is wrong with W3Schools. I mean, tables or layout... Pleeeeeeease!

that alone is worth a +1 ! :friends:
0

#7 User is offline   Wickham 

  • Web Guru
  • View gallery
  • Group: Moderators
  • Posts: 2,876
  • Joined: 11-June 09
  • Reputation: 257
  • Gender:Male
  • Location:Salisbury UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 25 January 2012 - 08:06 AM

If you want two narrow strips at each side of a page, you can create an image of a desired width x enough height to fill all browser window heights and put one as a background-image to the html style with background-position: left top; background-repeat: no-repeat; and use it for the other side to the body style with background-position: right top; background-repeat: no-repeat;

This post has been edited by Wickham: 25 January 2012 - 08:08 AM

0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users