CODEWITHSUNDEEP
htmlcss
user2353287
user2353287

Reputation: 31

Responsive div with width and height set

I am using foundation 4 as a framework for my personal site (not 100% portfolio site, more as advertising myself as a freelancer) and I have a contact box with a background image set and these CSS styles applied:

#contact-box {width: 1052px;
      height: 400px;
      background-image: url('../images/contact-bg.png');
      margin-top: 150px;}

I want to make it so it scales down when you shrink the browser, but instead it just gives me a horizontal scrollbar and doesn't scale at all and I know it's because of the 1052px width set... So how would I code this out so it's responsive? If I use max width and max height it breaks the div and removes its bg image. The contact box has a contact form in it (which is responsive) along with a phone number, email, and 3 social icons.

Upvotes: 3

Views: 19152

Answers (3)

The Mechanic
The Mechanic

Reputation: 2329

You can try this and modify it your according source taken from here http://css-tricks.com/perfect-full-page-background-image/

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

and this is another method for doing this 

#contact-box{ 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Upvotes: 1

Sheriff_McLawDog
Sheriff_McLawDog

Reputation: 71

I wanted to just leave a comment but I don't seem to have the option..

I don't know if this is the answer you want but I usually make background images scale to the window size with code like this:

width: 100%;
height: 400px;
background-image: url('../images/contact-bg.png');
background-size: 100%;
margin-top: 150px;

You can use that css code for div tags and the page body, although in my experimentation the width and height values are not necessary for the page body. Doing it this way will maintain the aspect ratio of your background image and should allow it to scale with the window.

Since the above example maintains the aspect ratio, the image will scale vertically to the point where it exceeds the size of the container it is in and will appear to be cut off on the bottom. Alternatively you can use:

width: 100%;
height: 400px;
background-image: url('../images/contact-bg.png');
background-size: 100% 400px;
margin-top: 150px;

The second argument for the background-size element will make sure the image never scales vertically at all. This method however will result in your background image being horizontally stretched whenever the window's width exceeds the aspect preserved width of the image you are using.

Hope this helps! :)

Upvotes: 1

Graham
Graham

Reputation: 43

Set the width of #contact-box to width: 100%.

Upvotes: 0

Related Questions