Image Resize

Miguel, there are a couple cool methods for learning how someone else may have coded a website. In your example there I pulled up the 'Web Inspector' in Safari (Developer Tools in Chrome), and what this does is allows me to go through the code, while at the same time viewing the page.

So for your example, on that website this is the line of code that contains that entire header image (specifically it is in a DIV ID'ed as "banner", and each banner has a div class).

<div id="banner" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 11760px; height: 450px; opacity: 1; z-index: auto;">
<div class="banner three" style="width: 1680px;">

It looks like they are manually setting the width of the item in pixels( 1680px ), and setting a maximum height for the banner ID as well. Depending on how your website looks, you might even be able to use 100% for the width and constrain the height to the size your desired (somewhere between 300-400px).

If you want to accomplish something similar to this, I would advise looking at the styles of this site with developer tools on Chrome or Firefox.

At it's most basic level, what you need to do to get this effect is to call your image as a background-image with background-size set to "cover", then declare a height and set overflow to hidden. The site you referred to uses a height of 450px.

so

.fixed-proportion-background { position:relative; background: url(/your-url.png); background-size:cover; height:450px; width:100%; overflow:hidden; }

You can then play around with background positioning to get the look right.

Thanks for everyones replies, I used Michaels suggestion and it worked quite well. I understand the developer tools but the css in the develop section is confusing me cause there is a lot crossed out and not much css.

thanks for your help.

One more question on background-position: can i only use top, bottom, centre etc? or can i use numbers?

I have another problem guys, On the same website you can see the info box that goes on top of the main picture, when i make my background another color it doesn't change when i preview in my browser? is that because the banner is already a background? do i use positioning? I have tried to use the inspect tools but i couldn't figure it out.

THANKS

Hi again Miguel,

That info box is a div of it's own. That means that it is on top of the full-width image behind it.

If you give this div a class, then in your CSS you will be able to style and position it how you want.

Hope this helps

I have the background pic in a div class of banner. I then have a info box class div nested inside the banner div. is that right? I can get the styling to work except the background color of the info box. When I view all the changes in the browser. They all update except the background color.