CSS masters please...

Out of context: Reply #14

  • Started
  • Last post
  • 27 Responses
  • mg330

    Howdy and happy new year!

    Are any of you familiar with how to set a transparent background for a div that overlays something else in Safari?

    I'm driving myself crazy trying to find a solution to a div that is displayed above a fixed background video (continuation of what I posted below) and transparent or gradient backgrounds work in Firefox and Chrome, but not in Safari. I can share something later if I change a few things on the site, but anyone know what the secret is?

    mg33 0Permalink
    UpvoteDownvote
    Flag
    • imo, it *shouldn't* matter, if you're just using divs and video tags, so might it be a z-index issue?Nairn
    • post a linkdbloc
    • Just made the page live. http://mg33.com/musi…mg33
    • Firefox and Chrome work and display the slight black to transparent gradient just fine as you scroll. Safari displays white for the transparency.mg33
    • There's a second page with a non gradient, black background for the scrolling section: http://mg33.com/musi… - I just don't want to use this.mg33
    • I like the black > transparent gradient, and it works in all but Safari. It's really making me mad. :(mg33
    • just use a 5pixel wide transparent black gradient png filling the whole container. May not be the best solution but will work cross browser. Visual Composerfadein11
    • often throws up issues like this, it's often how you nest your rows etc.
      Obviously set the the narrow PNG to repeat-x and it doesn't have to be 5 pixels wide      fadein11
    • but needs to be small file size. Obviously make sure it's the correct height or set it's size to :cover;fadein11
    • fadein11 - Thank you. Big question: Can the height of that gradient scale? Should I use it as a bg for a portion then CSS black for anything longer than that?mg33
    • 'better' to have a slightly bigger png than slow down the rendering by having too small an image repeat too much mind!Nairn
    • if you use background-size: cover; it wo';t repeat and will fill the space of the container regardless of size, but good idea to make it near the size requiredfadein11
    • as the gradient will look ropey otherwise.fadein11
    • won't*fadein11
    • cover will work across devices as it will scale but you could use repeat-x and a correctish height image for device with media queries.fadein11
    • as I said this may not be the best method but it will work and may save hours of trying to debug a quirk in Visual Comp and CSS gradients.fadein11
    Show [[ numHiddenNotes ]] more notesAdd Note
    SaveCancel

View thread