Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Junior Member
    Join Date
    Feb 2011
    Posts
    20
    Member #
    26643
    I am just beginning to learn html and css, so I apologize if I ask a lot of stupid questions.

    I am trying to use an image as a header at the top of my page. The textbook that I am learning from suggests that instead of just putting the image in the html, it is better to have a text header that is positioned off the page, and then use CSS to make the image the background to the header.

    Following this advice, I have something like this
    css:
    Code:
    h1	{text-indent: -9999px;
    	background-image: url(images/my_image.gif);
    	background-repeat: no-repeat;
    	background-color: #502d0e;
    	background-position: center;}
    html:
    HTML Code:
    <h1 id="banner"> Some text here </h1>
    This is not displaying the image correctly though. The top and bottom of the image are both being cut off, and there is some white space above and to the sides of the image that I do no not want. What am I doing wrong?

    Thanks!

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    the reason for this is html only views of the page will not see your header and search engines will not index the info in an image.

    div.header {
    position: relative;
    width: 100%;
    height: whatever;

    background-image: url(images/my_image.gif);
    background-repeat: no-repeat;
    background-color: #502d0e;
    background-position: center;}

    div.header h1 {
    display: none;
    }

    you need to specify a width & height for the div or it will collapse without the h1 displayed.

    while($get_it !== true){ continue; }

  4. #3
    Junior Member
    Join Date
    Feb 2011
    Posts
    20
    Member #
    26643
    Thanks for the help. I'm not sure I really understand it though. To be honest, I am pretty confused about what div is used for in general.

    Why do I need to use div here? Would it not be possible to just assign a height and width to the h1 directly?

    Also, I do not want my image to have a width of 100%, I want it centered with solid brown on either side of it (that is why I specified that background color). Did I do that part right?

    And can you really use display:none for this? My book I am using says doing so will remove both the header text and the image.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Depending upon what you're doing, you might be able to use Cufon.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    you are using a text tag. you can place images in them, but thats not the intent. a div is a container. you are trying not to show text, in a text tag. it' going to fight you because your are coding in contradiction. h tags have parameters for padding and margin based on the fact they are for text. this is why you see the same h1 or header size 1 tags in your office suit.

    the way to do this.

    div.header {
    position: relative;
    width: 100%;
    height: whatever;

    background: #502d0e url(images/my_image.gif) top center no-repeat;
    }

    div.header h1 {
    display: none;
    }

    <div class='header'>
    <h1>text</h1>
    </div>

    this will get the desired results. the indent will not work and i can't believe that actually made it into a book.

    while($get_it !== true){ continue; }

  7. #6
    Junior Member
    Join Date
    Feb 2011
    Posts
    20
    Member #
    26643
    OK. I think I get what your code is doing now. One more small question, if you don't mind.

    Why do you use <div class="header"> and not <div id="header">?

    Does it make a difference?

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    in this case you could use either. id tho is for a single element and are used in DOM(javscript). classes can be reused throughout your markup. like .red { color: #ff000; }
    i used class because you used an id and i was unsure weather or not you needed to appoint an id for other reasons and a class would not interfere with that.

    while($get_it !== true){ continue; }

  9. #8
    Junior Member
    Join Date
    Feb 2011
    Posts
    20
    Member #
    26643
    I see. Thank you so much for all the help. I feel bad for asking all these simple questions. My code now looks like this:

    Code:
    #banner	{background-image: url(images/regen_logo.gif);
    	background-repeat: no-repeat;
    	background-color: #502d0e;
    	background-position: center;
    	height: 100px;
    	width: 100%;
    	position: absolute;
    	top: 0;
    	left: 0;}
    	
    #banner h1 {display: none;}
    I had to add the position, top, and left attributes to remove the white space that was appearing around my banner. Everything now looks exactly as I wanted if I use my browser in a maximized window, but I notice that if I use a smaller window, the browser does not provide scroll bars, even though the image is wider than the window, so I cannot see the whole image. Any idea why?

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    That code actually won't quite work for what you want. It's pretty close, though.

    The problem with display: none; for a text-based tag is that certain screen readers and accessibility agents won't read it. If you want it to be read across the board, you're going to have to make sure it's visible (display: block and that it isn't hidden. Search engines also have a tendency to ignore text that is hidden and doesn't show up with any kind of Javascript.

    You'll want to do something like this: #banner {position: absolute; z-index: 2}
    h1 {position: absolute; z-index: 1}
    Put the h1 after the banner, and then make sure that you use the same top, left, width and height attributes.
    Code:
    <div id="banner"></div>
    <h1>Text</h1>
    This will work, regardless of circumstances. Even if a user disables images (which is pretty unlikely), the h1 text will still show up.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Junior Member
    Join Date
    Feb 2011
    Posts
    20
    Member #
    26643
    Thanks TheGAME1264. I used your way and it seems to be displaying fine.

    But now the next line in my html is not appearing at all. I think maybe it is not visible because is is going underneath the banner? Do I need to use absolute positioning for every element on my page to keep this from happening?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

apply image as header html
,

how to add an image to a header on html

,

how to set an image as a header in html

,

how to use an image as a header in html

,

how to use image as header in html

,

image in header html

,
use image as header
,
use image as header html
,
using an image as a header in html
,
using image as header
Click on a term to search for related topics.
All times are GMT -6. The time now is 03:38 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com