WordPress.com

1. amk002
   Member
   Sep 12, 2011, 12:11 AM

   I have an image for my header created and posted here: http://www.flickr.com/photos/67404362@N04/6136786445/in/photostream/ (at flickr.com)

   However right now I have an image through wordpress as my header. I tried removing my image in the header option on wordpress and adding this image in my CSS like below
   #title {
   background: url(MY_IMAGE_URL);
   }

   with my url for the image inserted, but it comes up weird and not like it's depicted on flickr.

   Any advice on how to fix this? I really want my image displayed as the header for my blog as it is on flickr.

   Thanks!!

   The blog I need help with is letmebewhatsunderneath.com.

2. devblog
   Member
   Sep 12, 2011, 2:50 AM

   Replace your #title selector with this:

   h1#title {
   background: #cd2d5d url(http://farm7.static.flickr.com/6180/6136786445_b84392f1cc_b.jpg) top center no-repeat;
   height: 250px;
   width: 100%;
   }

   See if that helps.

3. amk002
   Member
   Sep 13, 2011, 12:30 AM

   It does help. The only thing I would still like to improve is to have my design stretch further over my site. I don't like how there is a lot of blank cranberry color on each end of my header...if that makes sense..

   Is there any way to correct this?

   Thanks again!

4. designsimply
   Staff
   Sep 13, 2011, 5:35 AM

   You can only stretch or fit an image so far with CSS. If you really want to stretch an image that is not already the right size for the space you want to put it in, then I would recommend that you download the file from flickr or get the original and edit it to the size you want to use. Currently, the header image space on your site is set to 920 x 180 px.

5. amk002
   Member
   Sep 14, 2011, 2:43 AM

   I changed the sizing and reuploaded the image, but now I can't get the header to show up at all. Is there something wrong below?

   #title {
   background:url('http://www.flickr.com/photos/67404362@N04/6146075814/');
   }

   Thanks

6. thesacredpath
   Member
   Sep 14, 2011, 3:10 AM

   As I said in the other thread this, http://www.flickr.com/photos/67404362@N04/6146075814/ , is not the URL of the image. It is the URL of the flickr page the image is displayed on.

   Upload the image to your media library here and put the URL of that image from your media library into the CSS. Having the image offsite will likely cause it to display erratically to people and will also slow page loading times for your site.

7. devblog
   Member
   Sep 14, 2011, 4:59 AM

   Having the image offsite will likely cause it to display erratically to people and will also slow page loading times for your site.

   Uhmm... not really. Although the browser will make a request to two different servers, and putting aside the user's connection, it will depend on what server the image is being hosted. Hosting/serving images from flickr shouldn't be an issue.

8. devblog
   Member
   Sep 14, 2011, 5:07 AM

   Amk, replace your current #title selector with this:

   #title {
   background: #cd2d5d url(http://farm7.static.flickr.com/6066/6146075814_6b01b17366_b.jpg) top center no-repeat;
   height: 180px;
   margin: 30px auto 0;
   width: 920px;
   }

   That should do it.

Topic Closed

This topic has been closed to new replies.