Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

header image size

Discussion in 'Website Design Forum:' started by Steff, Mar 6, 2012.

  1. Steff

    Steff Junior Member

    Hello there, I'd like that my header image (banner) is connected on the left and right of the browser in all browser sizes. For example, the design I did on my 13inch the banner sits perfect but my brother who's got an Imac with 2560 or so pixel and 27 inch. I don't mind if my image is a bit pixelated when it is blown up, I just want it to fit everywhere the same. My banner is 1250px or so at the moment. I also would like that when you open the page on a phone that the header image should shrink to the optimal size. Do you know what I mean?
    Would be awesome if you could help me with that!
    My page is:
    Stephanie Passon
    (have a look at the source)

    P.S. I tried to find the right answer in so many forums but haven't found it yet unfortunately.
    P.P.S. I have tried so much already and went back how the code was in the beginning:
    .header_img {
    margin: 0px auto;
    padding: 0px 0px 0 0;
    position: relative;
    Please help me!
    Many thanks in advance!
  2. BenJonesDesign

    BenJonesDesign Active Member

    Hi Steff, please introduce yourself over on the introduction section but this is an easy one so I'll help.

    Basically what you need to do is do the header in two parts. Firstly cut a segment of the header which would go from half way between two dots to half way the other side of the dot and then make this a background image of the top div and then make it repeat using background-repeat:repeat-x, also make the width of that div 100%. This would give you a header that will fit to any width and maintain the resolution because it's just repeating the same image. Now with image inside the header; turn off the background in Ps so you have the image displayed with a transparent background, save for web as png then create another within the last div you created, center it and add the png image. Hey presto that should sort it.

    With this you will also need to create another div below it as a wrapper to hold all content, center this also so everything stays in line with the header image.
  3. Steff

    Steff Junior Member

    Thanks so much Ben!!! I'll give it a go!!! If I am struggling I might come back to you if it's ok ;) One more question, where is the introduction section?
    Again! Thanks sooooo much!!!
  4. br3n

    br3n Senior Member

  5. BenJonesDesign

    BenJonesDesign Active Member

    no problem Steff, intro section is here
  6. Steff

    Steff Junior Member

    Hi again,
    unfortunately, I am not able to see the html of the cargo website, only the css (I'd need to pay to be able to see the html source).
    As Ben said, I uploaded the two images separate , but because I can see CSS only it was kind of tough. I have to upload a header image, and this is one image only and yes! I'm struggling big time.
    I've also tried the Perfect Full Page Background but that doesn't seem to work either.
    This is the only thing I can see:

    /* Header / Navigation

    .header_img {
    margin: 0px auto;
    padding: 0px 0px 0 0;

    I have plaid around with that, I have tried to add separate links to the header image but that doesn't change nothing.
    Well, unfortunately, I'm really struggling and I had to have it done last Monday.
    The one image has this link:
    the png:

    but as soon as I try to add them to the header image (I delete the header image in cargo and just add this for example:

    .header_img {
    <img src="" width="100%" height="auto" position:="top" image-repeat:"repeat-x">


    so just adding the first image doesn't even work.
    Please help!
    Again, thanks so much! I'm sorry, but coding isn't my strength yet ;)
  7. BenJonesDesign

    BenJonesDesign Active Member

    ah so you're using a web builder. with what I'm saying you need to be able to edit the html to add the correct divs. You've done the images right but you could go as far as doing what I said and only having a segment of the first image and then to repeat it.

    If you can get to the HTML it would look like this:

    <div id="headerwrapper">
    <div id="headerimage">

    The first image would be the background image of the first div then the second would be the background image of the second.

    Thinking about the code you have their you could make the second image the .header-img then inside the styles of that class add background-img: url ('imagename.jpg); but then not sure on how to state the width for the background of an image. Ideas anyone?
  8. Steff

    Steff Junior Member

    Well, unfortunately, I do not have access to the html bits, just the css (again, they want you to pay if you want to change something within html). crazy ;)
    Maybe I just change my image so that there's a green outline only or something instead of dealing with the impossible :D.

    My brother just downloaded the website and changed the html code to:
    <div class="header_img" ><a href="/stephaniepasson" onfocus="this.blur()"><img src="" height="405" width="1279"></a></div>

    instead of
    height="405" width="1279"

    he replaced it with
    style="width: 100%; height: auto"

    and tatatatatta!
    it worked!

    I tried to add this to the web builder and it didn't work!

    But here again, because I have access to CSS only is a bot of a tricky one :(

    Again! Many thanks Ben!!!! Any help is VERY VERY VERY much appreciated!
  9. Steff

    Steff Junior Member

    I have the answer!
    Unfortunately I have to stick to the one image instead of two separate ones (which would have been better for the quality!)
    but at least it is working!
    Here is the answer:

    .header_img {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%!important;
    .header_img img { width:100%; height:auto; }

    It worked!!!!
    Thanks so much for all your help!!!
  10. BenJonesDesign

    BenJonesDesign Active Member

    glad you sorted it

Share This Page