#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    4
    Rep Power
    0

    Resizeable background div


    HTML5/CSS3

    I have a div header with a gradient background. I want to put a logo image (semi-transparent) on top of the background but behind all the text, to the left. I want the png to resize with the natural height of the div.

    Any way to accomplish this?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    710
    Rep Power
    441
    You can try experimenting with the background-size attribute. Try background-size: contain or background-size: cover to start.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by rdoyle720
    You can try experimenting with the background-size attribute. Try background-size: contain or background-size: cover to start.
    I could do it if it were just the image, but I also want my background to include the gradient I already had there. So I want to use the image property, not the background property.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    710
    Rep Power
    441
    It's possible to have more than one background in most modern browsers. Or you could use two containing divs, one with the background and one with the gradient. Or you could put it in as an image tag with a max-height of 100%.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by rdoyle720
    It's possible to have more than one background in most modern browsers. Or you could use two containing divs, one with the background and one with the gradient. Or you could put it in as an image tag with a max-height of 100%.
    I thought about the containing divs, and might end up doing that.

    The image tag with max-height of 100% just stretches out the div to the image height.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    4
    Rep Power
    0
    I figured it out, I feel dumb. For any who come here later:

    You can put two backgrounds like thus:

    background: url('yourimage.png'), linear-gradient(etc.);
    background-size: auto 100%, 100% 100%;

    etc.

IMN logo majestic logo threadwatch logo seochat tools logo