adding text box to add html to add a background picture -no CSS upgrade yet!
-
hi!
I am new to WP and i have not upgraded to custom CSS but just playing around 1st.
I am experimenting with putting an image in the background, so added at text box in the side bar, and pasted this
<div style=”position:fixed;top:0;left:0;background:white url(‘http://i54.photobucket.com/albums/g97/maggiercook/cupcake-twitter-322pink.jpg’) no-repeat scroll;width:100%;height:100%;z-index:-1000;”></div>I didn’t want the image to repeat, but when i look at the preview, the image does not fit the screen and leaves alot of white, i have gone to photobucket to try and make this bigger, but it only allows me to size max width 800pixels,
I am completely new to learning all this so please bare with me!Can anyone advise me how to make the image fit the screen?
thanks!
Maggie
The blog I need help with is: (visible only to logged in users)
-
This won’t make your image bigger (the only way, I think is to actually make it larger in an image editing program), but if you make your background pink to match the pink in the image it doesn’t look too bad.
The other thing is, it would be better to upload the image to your own blog rather than linking to it somewhere else. For one thing, it would load faster because wp has only to go to the library to get the image rather than connecting somewhere outside. The other is what happens if photobucket is down?
-
Thank you for your reply, still a little confused as the original imahe was saved in photoshop at size 1200 pixels width, then i uploaded to pb,
So if i upload it to my blog,wher will i find the url for this in blog, do i have to add image widget like i added text widget,
I am sorry to sound think, but i am a complete beginner lol!
-
We were all beginners once! You will find the url of the image in your media library.
Step one, media —> add new
Step two, media —> library —> hover over the line with your image. It will give you the opportunity to edit, choose edit, and copy the http:// link from “file url”Use that in your div code.
(Be sure your image is optimized for the web or it will take forever to download.)
-
maggiercook,
It seems your image got resized by photobucket; its current dimensions are 800×600.
What’s the URL of your blog?
-
I’m not familiar with photobucket. Is that something they do? Make the largest image only 800 wide?
-
Hi devblog its http://designacloset.wordpress.com/ i haven’t added any content yet, just playing around with the background!
Thank you 1tess also! x
-
Okay, the following code will center your background image and your content should be also at the center of the bg.
<div style="position:absolute;top:0;left:0;background:#f2caca url('http://i54.photobucket.com/albums/g97/maggiercook/cupcake-twitter-322pink.jpg') top center no-repeat;width:100%;height:100%;z-index:-1000;"></div>You don’t need to add the “scroll” value to the background property since that’s its default value, hence I took it out.
If you want your background to be static (won’t move even when your scroll your page), then add the “fix” value to the background property. The code should look like this:
<div style="position:absolute;top:0;left:0;background:#f2caca url('http://i54.photobucket.com/albums/g97/maggiercook/cupcake-twitter-322pink.jpg') top center no-repeat fixed;width:100%;height:100%;z-index:-1000;"></div>Also, it is always a good practice to make the background color the same (or close to) the image background just in case the image doesn’t display at all. That’s why I changed the color from white to pink (#f2caca) – interesting how the HEX turn out to be for that shade of pink…
As Tess said, it’d be better if you uploaded your image to your WP account, so it doesn’t get resized by photobucket.
HTH
-
- The topic ‘adding text box to add html to add a background picture -no CSS upgrade yet!’ is closed to new replies.
WordPress.com Forums 