SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    925
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)

    Making elements with background visible without graphics

    Suppose I have a link that has an image background and it will look like this (see attachment) - having a background with rounded corners:
    button.png

    I see my attachment is 'pending approval' - if you can't see it then have a look at Home of the Mozilla Project - what I meant was a button similar to the orange 'Sign me up!' except with white text on dark background. The important thing is that the rounded corners are transparent.

    Html:
    Code:
    <a href='#'>BUTTON</a>
    CSS:
    Code:
    a {
        background: url(button.png);
        color: white;
    }
    The problem is that the text colour in the link is white and the background of my page is white so that without the background image the text is not visible. This means that before the browser loads the background image the text is not visible, which I would like to avoid.

    I used to do this:
    Code:
    a {
        background: url(button.png) navy;
        color: white;
    }
    which would display a dark background before the images are loaded - but now my background images have transparency and I can't simply apply a background colour because it will leak through the transparent areas.

    Apart from links <a> I will also have headers <h2> with similar backgrounds and would like a relatively clean solution to this. Will I have to use some additional wrapping elements like <span> or <div>? I'd like to avoid that and also preserve transparency if possible.

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    You can include a background colour that sits behind the background image.
    Code:
    a {background:url(button.png) blue;}
    It is good practice to do this on all background images, and choose a colour that is as similar to the overall image tones as possible. This ensures that the site looks close to the design even when the image can't be displayed.

    One thing to note is that if you have transparent sections of the image, the background colour will show through these.

  3. #3
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    925
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but as you can see I mentioned this method in my post above. The question is what do I do if I need transparent sections?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    hmm I went to approve your attachment and it disappeared. Attach it again if you need to.

    I don't see a solution to this other than changing the text colour to a dark colour to start with and then when the page has loaded change it back to white via script etc.

  5. #5
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    925
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    The attachment seems to be there - I can see it.

    The solution with scripts doesn't look elegant to me. But as a last resort I could load the background images via a script and after onload replace the background colour with the image and change the colour of the text.

    Or perhaps this:
    Code:
    <a href='#'><span>BUTTON</span></a>
    And apply background colour only to the span element, the span can be smaller than the whole link and if only the corners are transparent then the background colour will not show through.

    The ideal would a css property that would replace the background colour with the background image when loaded but as far as I know there's nothing like that in any specifications.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Lemon Juice View Post
    The attachment seems to be there - I can see it.

    The solution with scripts doesn't look elegant to me. But as a last resort I could load the background images via a script and after onload replace the background colour with the image and change the colour of the text.

    Or perhaps this:
    Code:
    <a href='#'><span>BUTTON</span></a>
    And apply background colour only to the span element, the span can be smaller than the whole link and if only the corners are transparent then the background colour will not show through.
    Yes you could apply a background to the inner element but of course that will give you a solid block effect around the text but may be a good compromise especially as one of the guidelines of accessibility is that text should be visible if images are missing and if your background image is missing or the user has turned images off then the white text on a white background will otherwise be invisible.

  7. #7
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Lemon Juice View Post
    Thanks, but as you can see I mentioned this method in my post above. The question is what do I do if I need transparent sections?
    Sorry, didn't read your first post properly!

    If your page behind the image has a solid background then you could replace the transparent parts with that solid colour. If your page behind the image has a textured, patterned or picture background then it's going to be trickier. There may be other options depending on the shape of the image and where the transparency is, can you give us a link to a live/demo example?

  8. #8
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    925
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    If your page behind the image has a solid background then you could replace the transparent parts with that solid colour. If your page behind the image has a textured, patterned or picture background then it's going to be trickier. There may be other options depending on the shape of the image and where the transparency is, can you give us a link to a live/demo example?
    I don't have a demo yet but this is not a real problem that I'm facing at the moment with my design - it's more that I'm cautious and trying to make all the css elements as flexible as possible. At the moment the background is white so there's no problem but it is possible I will have part of the page on a different background and I just wanted to be prepared ahead and use transparency/opacity wherever possible instead of fixed colours.

    For now, I'll get rid of transparency and choose better accessibility. I'd use transparent png's if I found a good enough solution.


Bookmarks

Posting Permissions

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