Day 18: Image Replacement (30 Days to Learn HTML & CSS)

► Browse WordPress Themes and Plugins:

Typically you don't want to use text for your logo. Despite the fact that it makes sense to add the name of your organization within an H1 tag, you might choose to include an image in location of your logo design. How would you do that?

This belongs to the Envato Tuts+ course thirty days to Learn & :

Keep in mind: this course was published in 2012. A number of the tools and practices have actually changed and enhanced given that recording, but the core principles are still pertinent.

For more excellent website design courses and tutorials go to:

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Envato Tuts+.
Discover totally how-to tutorials and online courses. Design a logo, produce a website, build an app, or discover a new ability:.

Envato Aspects.
All the creative possessions you need under one subscription. Customize your job by including distinct photos, font styles, graphics, and styles.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Components:.

► Subscribe to Envato Tuts+ on YouTube:.
► Follow Envato Tuts+ on Twitter:.
► Follow Envato Tuts+ on Facebook:.
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – -.

Day 18: Image Replacement (30 Days to Learn & )

CSS Best Sellers


You May Also Like

About the Author: csstutorial

30 Comments

  1. It is considered a bad practice, so this part of tutorial is not too helpful 🙂 You can find explanations on SEOmoz and stackoverflow. It would be interresting to hear Jeffrey’s opinion on this.

  2. Let’s say that images were turned off. You wouldn’t see the logo (in text format) because it was pushed away from the screen, right?

  3. When shutting off images in Google Chrome to test out the alt text nothing appears. I have made sure to delete the css file so that it won’t interfere. Everything except for the word nettuts+ appears exactly the same as Jeff’s nested img src in my html file…I tried to google (ironically) the issue and there were a few bugs from years back that required you to put a title=”” attribute into your img tag, but I haven’t seen any posts about it this year…Can someone please explain to me what I am doing wrong?…These Nettut+ courses are my first dip into the coding pool, so please be patient with me.

    1. P.S. I tried the alt text out in internet explorer and it functions fine—also bump on The Tabo Toast’s comment (I’m also curious how you would see the text in this video’s second method if it remains bumped off screen? Unless you view the page source info)

  4. very good but i want to make anavbar contain in

  5. img and link and on hover img changed how can i make it i lose my mind 🙁 
  6. Text-indent: -9999px; is completely useless.
    Tell me in what case would you be able to see that h1 heading if for some reason images can’t be displayed? After all it’s indented for -9999px, so therefore static, there is no way, well it can be done with JavaScript/jQuery but we are talking about CSS.

    Probably the easiest and most efficient solution:

    HTML:

    Nettuts+

    CSS:
    *{
        margin: 0;
        padding: 0;
    }
    h1{
        background: url(‘../img/nettuts_logo.jpg’) no-repeat; // Put this line in a comment and back and see the result
        width: 142px;
        height: 43px;
    }
    span{
        z-index: -1; // z-index represents the depth, like x-index horizontal line and y-index vertical line
        position: absolute;
    }

    // * is an all or universal selector, it gets rid of all default margins and paddings of every single element on a web page, i.e. it’s a very useful thing
    // z-index:-1; puts an element one layer below/under everything else, most commonly used together with position: absolute;
    Together with position: absolute; you could/can also use top: and left: properties(also right: and bottom:) which are used as coordinates for exact positioning of elements, but in this case theres no need for them.

  7. Css has the -9999 indent. But the original html does not. So if css doesn’t work, the -9999 indent also doesn’t work, and the text of nettuts is left by itself

    1. @Pamela Lohia  Did you verify this? Or, maybe we have different versions of chrome or internet explorer or something, because on my computer if I remove the image the text does not show up.  to me, I would assume css always works:  if it can’t find something it will return or do nothing.  text-index should work correctly because text is actually supplied in this example.

    2. This is the answer, verified, by the video pretty much if people were paying attention.

  8. When I eference the background image URL, I have to use quotes inside the ().  Instead of background: url(image);, I have to use: background: url(“image”);.  You didn’t do this in your video, and it seemed to function just fine.

  9. For some reason my images just aren’t showing up unless I put an image source in the code on the index.html page. I inspected the code in both chrome and Firefox. On chrome for some reason it’s says everything is right, but when you open the background image tab in the computed area, it says that the image its referencing is on the desktop and not in the file I linked on my style sheet. Now in Firefox it says everything I correct and even when I checked it pulls up the location and shows the image(if you use Firefox you know that hovering over image links the image pops up next to your cursor). However it doesn’t show up on the actual page not until I like it on index.html (Which is as you said bad practice). It’s really bugging me because I feel like I can’t move on until I figure out what is going on.

    1. Ok problem fixed. My image was too large, so I simply had to adjust the dimensions. For the rest of my tutorials I’m using an image with a colored background ?

  10. Thank you jeff till now i have learned alot you’re the best teacher so far.

    15:20 In order to Click/choose one radio..


  11. Java
    HTML
    Ruby
  12. bro plz suggest! i use exactly the same tag for img, put the image file into the html file but it still not showing the image.only a smll box arrive in the top left corner of the page………..!!!!! 🙁

  13. using text-indent will just push the text out of the visible area. The only problem is that it is still there and crawlers can see it and get your website blacklisted.

  14. Thanks a lot for sharing wonderful information.
    As you make NUT TUTS -9999 px. In the case when image is not load it (NUTTUTS) also not display on the screen.
    Am i right..?
    Please help me in clearing this doubt.

  15. much beeter off usng

    Section Header

    In your CSS, define the class as such:and .headerReplacement {
    text-indent: -9999px;
    width: 600px;
    height: 100px;
    background: url(/path/to/your/image.jpg) #cccccc no-repeat; in your css. Don’t forget the period before headerReplacement as it is a class. I looked this up when I couldnt get hs way to work and i read this is more SEO friendly which is extremely important. The best looking website in the world does you no good if no one sees it. My image is png and works too

    1. B what you are doing there does no more for the seo than what he is doing, both is equal in terms of seo. All that you changed was adding it to a class of its own in order for you to be able to use another h1 heading which doesnt use the same style. But if you originally planned to only use the h1 heading for the logo then its redundant to put it into a class.

  16. I am really happy that I have found this channel now I am learning very fast during my quarantine because there are three days left and I need to cover all in these days. I have already covered 21 episodes in first three days and remaining are left for next three days. Thanks a lot bro for these tuts.

  17. Please my image isn’t showing fully. Only half of the image displays. What could possibly be wrong?

Leave a Reply

Your email address will not be published. Required fields are marked *