CSS editor and header image resizing

  • Author
  • #741613

    Hello all,
    So I am using the CSS editor and am trying to upload a jpg to use as the banner. The image is large, 690px X 470, and I know from a design standpoint that is too big, but the woman I am working for doesn’t care and wants this image only. I have used this code to reside the header format:

    #title {
    background:transparent url(‘http://path/to/new/image.jpg’) no-repeat scroll center top;
    height: 470px !important;
    width: 690px !important;

    I have inserted it into the CSS editor box, but when I preview the page, the header is plain white. Also, when I try to upload a new header, it still wants to crop is at 180px tall.
    Have I inserted the code incorrectly? Do I need to upload the entire Vigilance stylesheet into the CSS code box?
    This is obviously my first try at using the WordPress interface, so I’m feeling pretty n00b-y.
    I am using Vigilance theme through wordpress.com
    Thanks, and sorry.

    The blog I need help with is theprincessandthepeasdotcom.wordpress.com.


    Can you give us the URL of the image you uploaded to the media library so that we can take a look at things?

    Also, is this, http://princessandthepeasdotnet.wordpress.com/ , the site you are talking about?


    No, I have recently taken over for this client after she tried to handle this site creation and image editing by herself, so there are a lot of entries there that I am going to have to get rid of later today. Here is the site I’m talking about.




    That site is using Kubrick.


    I need the URL of the image you uploaded and tried and I need to know if you are now going to use Kubrick as a theme since that is what the site you reference is now using.


    The URL of the image is:
    <img src=”http://i.imgur.com/Tq5wx.jpg” title=”Hosted by imgur.com” />

    I gave you the wrong version of the blog. Sorry about that. It is actually http://princessandpeas.com

    I just started on this “project rescue her website plan” a few hours ago and I trying to keep this all straight as well. haha


    http://princessandpeas.com/ does not exist. My browser cannot find it.


    I’m sorry. That’s on me.


    Also, it occurred to you me you might have asked for this URL of the image instead.


    OK, apparently this is the URL of the site: http://princessandpeas.wordpress.com/ and a .NET domain name is redirecting to that site.

    First off you have a site and header area that is 920px wide (clear) and the image the client is wanting to use is 780px wide which is going to look like one of those tiny clown hats on top of the site. To use that image, and have it look anything like “right,” either the image is going to have to be enlarged so that it is 920px wide, or the site is going to have to be reduced in width to 780px.

    You hadn’t actually put the URL of the image into the background declaration. All it had was a fake placeholder URL. Secondly, the image is not 690px x 470px, it is 780px x 627px.

    I’ve corrected the URL, corrected the height and width, added a background color that sort of blends in at the sides of the image and adjusted the image position to get rid of a white band at the top of it and have it align properly with the background color, and centered the image.

    #title {
    background: url("http://i.imgur.com/Tq5wx.jpg") no-repeat scroll center -3px #2B1509;
    height: 627px !important;
    margin-left: auto;
    margin-right: auto;
    width: 920px !important;

    Replace the URL in the background declaration, between the double quote marks, with the uploaded image.


    Never mind, TheSacredPath.

    I found another thread in which you actually helped someone do this exact same thing. You must be the local guru.


    Oh, you posted that as I was typing.
    thanks again!


    You are welcome.



    Hi thesacredpath,

    I’m wondering if you could please help me with my site as well? I am trying to upload an image (860 x 310) that needs to go into Chunk Theme header (80×140)

    Is there anyway to do this? Please help!




    This will do it for you, but you need to have the header image 800px wide by whatever height otherwise you are going to have to widen the entire theme which can be a lot of work. I’ve used the 850px wide image you have in the coming soon post and the edges of the #header image element. Adjust the height value below to match the height of the final 800px wide image.

    Upload the new header image to your media library, get the URL of that image and replace the URL in the background declaration below (between the double quote marks).

    #header-image img {
    display: none;
    #header-image {
    background: url("http://adrinkwith.files.wordpress.com/2011/08/adw_76.jpg") no-repeat scroll center top transparent;
    height: 310px;

    Can you halp me, too?
    I’m trying to chaange the header of http://ilmondodiisabel.wordpress.com/
    #topbanner {
    background-image:transparent url(‘http://ilmondodiisabel.files.wordpress.com/2011/11/ilmondodiisabelv12.jpg’) no-repeat scroll center top;
    but it doesn’t work.
    It’s the first time Im workig with work press.
    Thank you a lot.


    Since the original image was set in the PHP script files, you have to use the “important” attribute to override that. The below works for me although your image really needs to be 960px wide instead of 951px.

    #topbanner {
    background: url("http://ilmondodiisabel.files.wordpress.com/2011/11/ilmondodiisabelv12.jpg") no-repeat scroll left top transparent !important;
    height: 160px;

The topic ‘CSS editor and header image resizing’ is closed to new replies.