CODEWITHSUNDEEP
htmlcss
user1404664
user1404664

Reputation: 83

Inserting a Banner Image on Top of Every Page CSS

I am learning how to create a website and I have stumbled upon a problem I can't figure out. I want to place a banner on the top of every webpage page of the site, and I was wondering if this can be done using a .CSS. I have a background already on the .CSS but I can't seem to insert a picture properly on top. This is my code:

 hr {color:sienna;}
 p {margin-left:20px;}
 body {
 background-image:url("pic2.png");
 }

And then I would call it on every page like (the css file name is style.css):

  <link rel="stylesheet" type="text/css" href="style.css">

Upvotes: 2

Views: 55332

Answers (2)

Nicholas Hazel
Nicholas Hazel

Reputation: 3750

Like this...?

JS Fiddle: http://jsfiddle.net/SinisterSystems/Yd4d6/

<div id="banner"></div>
<div id="content">
    Hello world
</div>



#banner {
    background:url('http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/banner_white.png');
    width:100%;
    min-height:189px;
}

Or do you want it to dynamically apply the element to your page?

For further insight, we need more data:

  • Will your banner be static, that is, always the same size and same place?
  • Will this show up on EVERY page, and do you want it just PLACED into the DOM?

If you are trying to actually add elements to your page, CSS only allows to perform pseudo operations with existing elements on your page.

Upvotes: 3

Andrew Liu
Andrew Liu

Reputation: 2548

I found one syntax error in you codes.

you can use only either use 

background-image:url("pic2.png");
background-repeat:repeat;

or 

background:url("pic2.png") repeat;

Upvotes: 1

Related Questions