InsaneJournal

Tweak says, "Where are Sam and Dean?!"

Kylie (50sglamorgirl) wrote in rp_tutorials,
@ 2013-06-05 18:46:00

Hello, I am currently changing my layout but I ran into my first road block straight away with changing the background:

http://users.insanejournal.com/brookeadams__/

the two black bits at either side, it's currently on center but it was previously on top left and it kept repeating it, any idea as to what to do?

(Read comments) - (Post a new comment)

forsythia
2013-06-13 12:37 am UTC (link)

In your css, you have this:

body { 
background-color: #000000; 
background-image: url(http://www.pictureshack.us/images/43979_ewsz.png); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center; 
}

Try adding background-size:cover; and changing background-position: center; to background-position: center top; so that the section in your css becomes:

body { 
background-color: #000000; 
background-image: url(http://www.pictureshack.us/images/43979_ewsz.png); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center top; 
background-size:cover;
}

That should fix it in Firefox (at least as far back as version 16; that's what I'm using) and Chrome, so the image is scaled to the size of your window.

Keep in mind, however, that depending on the browser window's size and the originating image, parts of the background may become invisible in certain windows. I believe this is because it keeps the original aspect ratio (which is good, as that means no squishing) but I'm not certain. Either way, that's why I suggested changing the background position to 'center top', based on where the main content in the image you're trying to use on the linked journal is located. Since that's where the image starts, the bottom will be what disappears in windows that aren't tall enough.

(Reply to this)

(Read comments) -