Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

stretch pressrow image header across screen?

  1. marymitchellwilliams
    Member

    How can I stretch the image I have uploaded from my computer to stretch across the entire length of my masthead at the top of the page? Currently, the header *texts* are the length I wish them to be, but the *image* I upload remains in the preexisting size format for pressrow.

    simple coding to fix this?

    The blog I need help with is marymitchellwilliams.com.

  2. sl1k
    Member

    Hello: marymitchellwilliams I don't know enough CSS to help but I am bumping the thread so the CSS wiz volunteers will have a better chance @ seeing this thread since it did get buried.

    CSS Volunteers ask you familiarize yourself with this post → http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  3. thesacredpath
    Staff

    You have to upload the image to your media library in the correct size for whatever modifications you have made, and then put the URL of that newly uploaded image directly into the CSS in the appropriate place. I think it is #pic .

  4. phoxis
    Member

    i think this also could be done with specifying the image height and width parameters of the img tag or in CSS.

  5. thesacredpath
    Staff

    The image tag doesn't exist in the CSS, and that is where the header image is declared. Further, it is always better to upload the correct sized image so that you are not relying on the browser to resize it. Browsers are horrible at resizing images and they will always be fuzzy if you rely on the browser.

  6. wanderlists
    Member

    I am having the exact same problem with pressrow. I've uploaded the image in the correct (bigger) size from my media library, but it still appears in the smaller version. The space in which to put it stretches out, but the actual image appears in the same, pre-customized size...

  7. thesacredpath
    Staff

    @wanderlists, the image that is in the #pic section "cropped-the-wanderlists-specs2.jpg" is 770 x 200 px which is the exact size of the original header image. You have to replace that URL in the #pic background declaration with the URL of the larger image. Also I can't see that you have changed any of the CSS at all - especially regarding widths and such.

    And it is a bad idea to paste the entire CSS stylesheet into the edit box at wordpress.COM. Read this to see why: http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/ .

  8. wanderlists
    Member

    thanks for the link- that clarifies what i thought was kind of vague in the general css instructions. i did actually modify the height and width, but changed it back to the original size because it looked silly with the small banner. I copied the url for the larger image from the media library (and deleted the old one) so i guess that's why i'm confused about why the old one is still there. i'm going to try again- thanks for your help!

  9. wanderlists
    Member

    Here's what I did, pic is still the small size:

    #pic {
width:800px;
height:300px;
border-bottom:2px solid #222;
clear:both;
float:left;
background:url:(http://wanderlists.files.wordpress.com/2010/05/the-wanderlists-800-x-300.jpg);
}

  10. devblog
    Member

    wanderlists,

    Two things:

    a) It seems you first added the header through the custom header feature of the them. You'll need to reset it (revert it to the "default" image).

    b) After you've reset the header image, you need to fix the syntax of your background property. Replace this:

    background:url:(http://wanderlists.files.wordpress.com/2010/05/the-wanderlists-800-x-300.jpg);

    with this:

    background: transparent url(http://wanderlists.files.wordpress.com/2010/05/the-wanderlists-800-x-300.jpg) 0 0 no-repeat;

    That should do it.

  11. devblog
    Member

    BTW, I forgot to mention that the syntax you have is wrong; here's the problem:

    url:(...)

    There should not be a colon (:) in between the URL and the opening parenthesis.

    Also, I noticed you have "float: left;" defined in your selector. Take it out, it's unnecessary to have it.

  12. wanderlists
    Member

    Thank you so much devblog!! That fixed it. I am very grateful- wasted about three hours on this over the weekend! Now I know to come to the forums first...

  13. marymitchellwilliams
    Member

    @ thesacredpath : even when I export my banner image in the exact dimensions I wish it to be, it still publishes in the short length pressrow format. I am totally new to CSS, so this is a complete learning experience to me BUT this has been the most difficult thing I've dealt with so far (which says a lot).

    So is there no simple code I can enter to justify the situation? Further, do I need to design a header image outside of simple wordpress uploader and enter its code into the CSS form in order to get what I want?

    It's all about size and scaling I think! It shouldn't be this hard! I'm going to be pissed when the solution is absurdly simple.

    Thanks friends,
    MMW

  14. thesacredpath
    Staff

    First as devblog says, go to the custom header section and reset the header to the original.

    Next, don't upload the image using the custom header upload feature. Upload it directly to the media library at media library > add new and then get the URL of the image from the grey field at the bottom of the pop up window after the image has uploaded. Put that URL into the #pic background declaration in the CSS. The custom header feature will always resize the header image to the original dimensions.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags