WordPress.com Forums » Tag: background images - Recent Posts http://en.forums.wordpress.com/tags/background-images WordPress.com Forums » Tag: background images - Recent Posts en Mon, 20 May 2013 08:37:41 +0000 http://bbpress.org/?v=1.1-alpha-2539 thesacredpath on "bordering posts with an image on Chunk" http://en.forums.wordpress.com/topic/bordering-posts-with-an-image-on-chunk#post-1267220 Thu, 16 May 2013 04:06:13 +0000 thesacredpath 1267220@http://en.forums.wordpress.com/ Edit the body .home selector and make it body.category so that it will show only on the category pages as shown below. The second bit of code sets white for the content area. I'm assuming you will want the background image an white content background on the single post pages as well (after one clicks on a post title). I've used the "archive" body class so that it will show not only on the categories pages, but also on archive and tags pages.

body.archive, body.single {
background: url("http://imveryape.files.wordpress.com/2012/02/justice_in_concert-60.jpg") no-repeat scroll 0 0 transparent;
}

.archive #container, .single #container {
background: #FFFFFF;
}
]]> imveryape on "bordering posts with an image on Chunk" http://en.forums.wordpress.com/topic/bordering-posts-with-an-image-on-chunk#post-1267207 Thu, 16 May 2013 03:39:32 +0000 imveryape 1267207@http://en.forums.wordpress.com/ Hello all, I am looking to border my posts with an image. Very similar to how illogical computer does it http://illogicalcomputer.com. My posts only appear on the Best New Music, Hidden Gems, Best-of Lists and Thoughts page so those are the ones I am looking to border with an image. The actual background behind the posts I am trying to keep white.

Any CSS tips?

Thanks!

]]> thesacredpath on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1263888 Mon, 13 May 2013 04:57:46 +0000 thesacredpath 1263888@http://en.forums.wordpress.com/ Here you go.

#header {
height: 80px;
}
]]> pstrapp on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1263884 Mon, 13 May 2013 04:52:30 +0000 pstrapp 1263884@http://en.forums.wordpress.com/ Great stuff, thanks! Almost there...

Now I need to make the header a bit larger to balance the "white space" top and bottom of the text.

]]> thesacredpath on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1263877 Mon, 13 May 2013 04:41:43 +0000 thesacredpath 1263877@http://en.forums.wordpress.com/ Add this to #blog-title and play with the sizing.

font-size: 220%;

]]> pstrapp on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1263787 Mon, 13 May 2013 01:05:51 +0000 pstrapp 1263787@http://en.forums.wordpress.com/ OK, I got rid of the original header by adding some CSS code. Now I'd like to make the header text a bit bigger to balance the 50x50 image size.

]]> thesacredpath on "Fitting custom background to screen?" http://en.forums.wordpress.com/topic/fitting-custom-background-to-screen#post-1262525 Sat, 11 May 2013 13:49:41 +0000 thesacredpath 1262525@http://en.forums.wordpress.com/ The text isn't technically within the "body" and "body boundaries are the edges of the browser window. All page elements (text, etc.) are within the "page" div and the children/grandchild/etc., divs, which have dimension independent (sort of) of the browser window. That means the two resize differently.

]]> traviscoleman614 on "Fitting custom background to screen?" http://en.forums.wordpress.com/topic/fitting-custom-background-to-screen#post-1262425 Sat, 11 May 2013 07:10:04 +0000 traviscoleman614 1262425@http://en.forums.wordpress.com/ Thanks!

When I resize my window, the image conforms somewhat but now the text doesn't. I'll keep messing with it.

]]> thesacredpath on "Fitting custom background to screen?" http://en.forums.wordpress.com/topic/fitting-custom-background-to-screen#post-1262389 Sat, 11 May 2013 06:01:01 +0000 thesacredpath 1262389@http://en.forums.wordpress.com/ Add this to your custom CSS.

body.custom-background {
background-size: contain;
}
]]> traviscoleman614 on "Fitting custom background to screen?" http://en.forums.wordpress.com/topic/fitting-custom-background-to-screen#post-1262385 Sat, 11 May 2013 05:52:27 +0000 traviscoleman614 1262385@http://en.forums.wordpress.com/ Hello,

I am attempting to get my custom background image to fit to any screen in CSS but can't quite figure it out.

Any help would be greatly appreciated!

]]> thesacredpath on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1261317 Fri, 10 May 2013 03:24:21 +0000 thesacredpath 1261317@http://en.forums.wordpress.com/ There seems to be something going on with the custom design at the moment because the custom CSS for several people isn't saving and the code they are using is correct. Perhaps staff are tinkering.

]]> pstrapp on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1261315 Fri, 10 May 2013 03:15:48 +0000 pstrapp 1261315@http://en.forums.wordpress.com/ Thanks, that has the new logo added, but on my CSS preview, the old logo still appears as well.

I'm guessing it doesn't display that way on yours, so I'm not sure how my setup is different from yours.

]]> thesacredpath on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1260202 Thu, 09 May 2013 02:34:06 +0000 thesacredpath 1260202@http://en.forums.wordpress.com/ This could probably be a little cleaner, but it gets the job done. I resized the image to 80px tall using Photoshop for you. Download this image, then upload it to your media library, get the URL of that uploaded image and replace the URL in the background declaration between the double quote marks.

#blog-title {
    background: url("http://flippintestblog.files.wordpress.com/2013/05/dancers-80h.png") no-repeat scroll top left transparent;
    text-indent: 70px;
    height: 80px;
    position: relative;
    top: -10px;
    line-height: 40px;
}

#blog-description {
    text-indent: 70px;
    position: relative;
    top: -50px;
}
]]> pstrapp on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1260189 Thu, 09 May 2013 01:50:22 +0000 pstrapp 1260189@http://en.forums.wordpress.com/ OK, good to know the qualifiers. The image I want to use is at http://bodyconnections.files.wordpress.com/2013/03/dancers.png and my trouble is I don't have a program that will allow me to resize .png files. I can get it done by someone, though.

I'm assuming that regardless of the image file, it'll be the same CSS code, yes?

]]> thesacredpath on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1260141 Thu, 09 May 2013 01:00:38 +0000 thesacredpath 1260141@http://en.forums.wordpress.com/ There are some ways of having the image adjust, but the problem is, you are going to be asking the browser to do the resizing of the image and browsers are very lousy at that. All they do is resize and either throw away or add in pixels as needed.

If you wish to use a larger image, we can do that as long as it isn't too much larger. The red area is about 100px in height. If you want something that is longer than it is high, we can do that also.

]]> pstrapp on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1260128 Thu, 09 May 2013 00:49:25 +0000 pstrapp 1260128@http://en.forums.wordpress.com/ I was hoping to use an image of any size rather than having to pre-convert the image to 50x50, so if people zoom in, the logo won't get chunky. Is that possible to do?

]]> thesacredpath on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1260085 Wed, 08 May 2013 23:48:34 +0000 thesacredpath 1260085@http://en.forums.wordpress.com/ The existing image is 50px x 50px. Will that work for you? If so, create your image, upload it to your media library and post the URL of that image here and I'll see what I can do. The existing image is set in the theme PHP script files, so I have to do some CSS trickery and it's easier if I have an image to work with.

]]> pstrapp on "how to change logo image in NotesIL theme" http://en.forums.wordpress.com/topic/how-to-change-logo-image-in-notesil-theme#post-1260058 Wed, 08 May 2013 23:24:51 +0000 pstrapp 1260058@http://en.forums.wordpress.com/ I`d like to change the logo from the first-aid-ish image to one of my own. My image could be any size, so I need to have some CSS code to accommodate a variable size image and display it within the header, where the default image is.

My blog is bodyconnections.wordpress.com. Thanks!

]]> thesacredpath on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232818 Fri, 19 Apr 2013 19:38:27 +0000 thesacredpath 1232818@http://en.forums.wordpress.com/ And thank you for the kind words.

]]> thesacredpath on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232816 Fri, 19 Apr 2013 19:37:54 +0000 thesacredpath 1232816@http://en.forums.wordpress.com/ You are welcome, and sorry for the problems with the new CSS editor. It still has some bugs in it, but staff will eventually get them all sorted out. Bookmark that link to the old editor for now so that you can get back to it easily.

]]> iuslab on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232799 Fri, 19 Apr 2013 19:27:03 +0000 iuslab 1232799@http://en.forums.wordpress.com/ Your're great, sir! ;-) Thank you

It works: I've got a new beatuful blog with a splendid 20.11 WP theme.

Have a nice, long and relaxed week end and be proud of you Mr sacredpath (nomen omen?), your're the best web volunteer I had the pleasure to meet!.

Kind & kindest regards

PS I've never seen before the separate css custom page you send with link.

]]> thesacredpath on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232780 Fri, 19 Apr 2013 19:08:52 +0000 thesacredpath 1232780@http://en.forums.wordpress.com/ Ok, this might be an issue with the new custom design page because the code works.

Go here and paste the stuff into the old CSS editor page instead:

http://iuslab.wordpress.com/wp-admin/themes.php?page=editcss

And just to confirm, this is the site you are talking about, correct: http://iuslab.it/ ?

]]> iuslab on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232771 Fri, 19 Apr 2013 19:03:27 +0000 iuslab 1232771@http://en.forums.wordpress.com/ Nothing ;-(
In the big box on the left has disapperad also the "welcome"message and with right click It's impossibile to insert nothing to be pasted.

It is only availabe the small box below (content width). But I triy to copy and save and I get nothing.

But is it correct to use http://iuslab.wordpress.com/wp-admin/customize.php#css ?

Anyway do not worry about. Feel free to stop your efforts for me....;-(((((((( And have a nice w.e.

]]> thesacredpath on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232740 Fri, 19 Apr 2013 18:42:46 +0000 thesacredpath 1232740@http://en.forums.wordpress.com/ Ok, all the below works for me. Copy the below and paste it into the custom CSS window and then save.

#site-title {
    background: url("http://iuslab.files.wordpress.com/2013/04/iuslab-300w.jpg") no-repeat scroll -90px 35px transparent;
    height: 110px;
    padding-bottom: 0.5em;
    padding-top: 3em;
    text-indent: -9999px;
    width: 300px;
}

#site-title a {
    display: block;
    line-height: 110px;
}
]]> iuslab on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232729 Fri, 19 Apr 2013 18:35:35 +0000 iuslab 1232729@http://en.forums.wordpress.com/ Ok...You're fully right!

But I don't succeed in handing CSS, I'm only a poor lawyer with no expertise in css coding or htlm

Anyway, I've saved just now your risized pic in pc, and dowloades in the media library of the dashboard.

The shortcut url is: http://wp.me/a1h23p-3G.

Meanwhile I'll calm down ....

(if you are a mere blogger volunteer, and not a WP worker, you will have all of mine respect for ever)

]]> thesacredpath on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232710 Fri, 19 Apr 2013 18:20:16 +0000 thesacredpath 1232710@http://en.forums.wordpress.com/ Did you by chance download and upload the image I created for you to your media library? If so, can I have the URL of that image?

And relax, take deep breaths, we'll get through this. :)

]]> thesacredpath on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232707 Fri, 19 Apr 2013 18:19:19 +0000 thesacredpath 1232707@http://en.forums.wordpress.com/ Never give your admin stuff to anyone, not even to one of us volunteers in the forums.

You do not have to download or install Firebug. That is just what I use for working with CSS and answering questions in these forums.

Give me a bit of time and let me work through it again for you.

]]> iuslab on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232688 Fri, 19 Apr 2013 18:11:39 +0000 iuslab 1232688@http://en.forums.wordpress.com/ please ;-)*****************

]]> iuslab on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232686 Fri, 19 Apr 2013 18:11:08 +0000 iuslab 1232686@http://en.forums.wordpress.com/ Oh God, I have to download firebug..for firefox!!!! I will die, as long with my poor pc, I know.

But if I give you, in direct e-mail, the admin entrance....into the dashboard, for istance

]]> thesacredpath on "I want to replace my Header text with an image logo.." http://en.forums.wordpress.com/topic/i-want-to-replace-my-header-text-with-an-image-logo-1#post-1232678 Fri, 19 Apr 2013 18:05:49 +0000 thesacredpath 1232678@http://en.forums.wordpress.com/ I don't see anything saved in your custom CSS using Firebug to view your site. Did the code disappear from the CSS edit window?

]]>