Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 CSS -> Header Background Image
Index -> Web Design
View previous topic Printable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
copthesaint




PostPosted: Wed Oct 05, 2011 12:59 pm   Post subject: CSS -> Header Background Image

Im just wondering how I could go about doing this in my css style sheet
I want to set an image to stretch to the full size of my header whatever the header size may be.
The image is a gradient png photo and I want it as the background behind my header text.
I am new to css, xhtml, however easy it is, I dont know how to do everything Razz
As well I want to know, what is the compatability of text shadows?
Sponsor
Sponsor
Sponsor
sponsor
ProgrammingFun




PostPosted: Wed Oct 05, 2011 4:44 pm   Post subject: RE:CSS -> Header Background Image

CSS:

#header {
        background: #FFFFFF url(url/url.jpg) left       center no-repeat;
        height:100%;
        width:100%;
}

It's really recommended that you have fixed (at least width) header otherwise, it may end up looking like crap. Therefore, something like this:
CSS:

#header {
        background: #FFFFFF url(images/school.jpg) left center no-repeat;
        height:260px;
        width:960px;
}


As for text shadows, a Google search produced the following site (pretty good): http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
Tony




PostPosted: Wed Oct 05, 2011 5:54 pm   Post subject: RE:CSS -> Header Background Image

if it's a simple enough gradient, you can have it implemented in pure CSS3 (no images).
Latest from compsci.ca/blog: Tony's programming blog. DWITE - a programming contest.
Zren




PostPosted: Wed Oct 05, 2011 10:18 pm   Post subject: RE:CSS -> Header Background Image

If you want a backwards compatible, and fast loading version. Draw the vertical gradient in a image editor. Then shrink the width to 1px.

Then use:
background: url(img/gradient.png) repeat-x;
height: ___px;

Basically it tiles the image only on the x plane.
Display posts from previous:   
   Index -> Web Design
View previous topic Tell A FriendPrintable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 1  [ 4 Posts ]
Jump to:   


Style:  
Search: