Login | Register | FAQ
Anonymous

Header with gradient background and logo.

+ Post a reply

7 posts Page 1 of 1


Header with gradient background and logo.

by jon267 » Tue Jan 18, 2011 3:00 pm

Hi. As I mentioned in an earlier thread I have just started learning html/css.

Is it possible to have 2 images in a div box? What I am trying to do is have a header with a gradient background, then insert a logo .png on top of the gradient.

The only way I have been able to achieve this up to now is insert the logo .png inside the header box as a image on in the .html doc.

Is it possible to do this on the style sheet instead of having to do it on every html page? Thanks.
User avatar

jon267

  • Posts: 4
  • Joined: Wed Jan 12, 2011 11:11 am

Re: Header with gradient background and logo.

by rswebs » Tue Jan 18, 2011 3:24 pm

is there an example of a website, so i can get what you are trying to do?
User avatar

rswebs

  • Posts: 77
  • Joined: Wed Nov 24, 2010 6:47 am
--
Thanks Rafael - www.htmltutorialtopics.com

Re: Header with gradient background and logo.

by frank » Tue Jan 18, 2011 4:27 pm

You can do something like this:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <style>
   .header {
      height:40px;background:#ccc url(img/gradientbg.png) repeat-x;
   }
   .logo {
      width:150px;height:40px;background:transparent url(img/mylogo.png) no-repeat;
   }
   </style>
</head>

<body>
   <div class="header">
      <div class="logo">
      </div>
   </div>
</body>
</html>

User avatar

frank

  • Posts: 18
  • Joined: Tue Nov 30, 2010 7:37 pm

Re: Header with gradient background and logo.

by jon267 » Wed Jan 19, 2011 9:48 pm

Thanks for the replies. Frank that has worked.

So to position the logo in the header I have done:
position:relative;
left:90px;
top:30px;

Is this the right/best way to position the logo? Again thanks.
User avatar

jon267

  • Posts: 4
  • Joined: Wed Jan 12, 2011 11:11 am

Re: Header with gradient background and logo.

by frank » Thu Jan 20, 2011 1:59 am

That sounds about right.
User avatar

frank

  • Posts: 18
  • Joined: Tue Nov 30, 2010 7:37 pm

oo

by lacroixz » Thu Jan 20, 2011 5:10 pm

oo

Last edited by lacroixz on Fri Sep 16, 2011 2:46 pm, edited 1 time in total.

User avatar

lacroixz

  • Posts: 74
  • Joined: Wed Oct 27, 2010 9:26 pm

oo

by lacroixz » Thu Jan 20, 2011 5:12 pm

oo
User avatar

lacroixz

  • Posts: 74
  • Joined: Wed Oct 27, 2010 9:26 pm


+ Post a reply

Page 1 of 1