Need Help with Background Image
Replies
So with my pet, Rondelle, I'm trying to add a background image for her profile. I want the background image to take up the entire space without repeating, but for the life of me I can't get it to work. Either the image won't show up or it doesn't take up the entire background and pushes the content to the right for some reason.
I'm going to post all of the coding that I currently have on her description just so you guys can see it altogether.
<style> , , -ban, -ban-main, -lrc, -rrc {display:none;} , -right, , , , h2, a, {display:none;} , , body, , , {background-color:transparent;height: auto !important;} {display:none;} body{background: url(http://img.photobucket.com/albums/v289/Iatomie/BeadsClose2a_zps8jdt0ygl.jpg); background-repeat: no-repeat;} .pet_wco_info_date{display:none;} .statbar{display:none;} {position:absolute; top:10px; right:55px; width:433px;} {height:200px; overflow:auto;} </style>
So did I got you right? You want the current background to cover the whole page? remember, you can stretch a pic, but it will blurry a bit, dependig on which screen resolution the viewer views it :) and the whole information part shall be placed at the left side instead of the right side? if yes, the following code may help (though I am a bit confused why I had to alter the position - maybe someone else has a better, cleaner idea)
: Thanks! That seem to do the trick for the most part. The only thing that still doesn't work is that the background repeats vertically, as in you scroll down the page and it starts to repeat. I also noticed that it does start to repeat itself horizontally a little bit. Is there more code that I can put in to fix that?
Sorry about the confusion. What I meant to say is that the coding, the way it was before, was pushing the content to the right and into the white space that showed up instead of the background being behind the content. I still did want the content on the right side.
try replacing this:
html, body {background: url(http://img.photobucket.com/albums/v289/Iatomie/BeadsClose2a_zps8jdt0ygl.jpg); no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
with this:
;){kind=link}
html {background:url(http://img.photobucket.com/albums/v289/Iatomie/BeadsClose2a_zps8jdt0ygl.jpg) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
: Unfortunately that doesn't seem to change anything at all.
really? that's the code i always use for scaling backgrounds, and it worked when i tested it just now. are you sure this doesn't work?
<style>
, , -ban, -ban-main, -lrc, -rrc {display:none;} , -right, , , , h2, a, {display:none;} , , body, , , {background-color:transparent;height: auto !important;}
{display:none;}
html {background:url(http://img.photobucket.com/albums/v289/Iatomie/BeadsClose2a_zps8jdt0ygl.jpg) no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.pet_wco_info_date{display:none;}
.statbar{display:none;}
{position:relative; top:10px; right:55px; width:433px; margin: 0 !important; border: 0; }
{height:200px; overflow:auto;}
</style>
: I think that did get it to work. I had to play around with the section to make it work though. I think the part of the code was messing with the background. Thanks so much for the help!
oh good! not sure why that would be, but i'm glad it's working now.
[edit]also just realized you are using right positioning on the content div, which is why it's appearing on the right side of the screen. if you want it on the left, you'd have to change 'right' to 'left'.