SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background size;cover works well in width, but not in height

    I am trying to put together a repsonsive website where a certain image basically scales nicely when I move the browser windown in from the right.

    But whats happening is that I am using a strict height as below, as have tried max-height and min-height and it rsults in the image not showing at all.

    But what my problem is that as the div with the background image is scaling, its still keeping its original height.

    Code:
    #home_Help_Image{
    position:relative; width:100%; height:300px; margin-bottom:6px; margin-top:9px; background-image:url(../site_images/welcome_Background.jpg); background-repeat:no-repeat; background-size:contain; background-color:#FF0000;
    }
    This is the site, which can be seen what Im trying to do by sliding the browser window in from the right.

    http://devchecksafetyfirst.csf.dcman...om/responsive/

    What I would liek to happen is rather than the height:300px; staying, instead it also reduces to fit the image, and the elements below then follwo it up too.
    But when I change height to say max-height, or height:auto etc, it doesnt show at all then

  2. #2
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would this help

    Code:
    #home_Help_Image{
      background: #ff0000 url(../site_images/welcome_Background.jpg) no-repeat;
      background-size:contain;
      height: auto;
      position: relative;
      margin: 9px 0 6px 0;
      max-width: 100%;
    }

    This isn't tested, I'm not sure if you can use the shorthand background and background-size separately.

    Sorry I always but my styles alphabetically - https://google-styleguide.googlecode...mlcssguide.xml

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Your site doesn't scale as the browser is narrowed, so the responsiveness of this is not working well anyway. There are all sorts of options, like

    background-size: cover;

    or


    background-size: auto 315px;

    etc.


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
  •