InsaneJournal

Tweak says, "Big Bang Theory"

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?

(Post a new comment)

	aidencav 2013-06-06 06:18 pm UTC (link)
	Depends on what you're wanting to do. Do you want the background image to fill the whole screen? Do you want the black bits on the sides to be a different color? Do you want the image docked to one side or another? What are you wanting to achieve with it? (Reply to this) (Thread)

	50sglamorgirl 2013-06-06 07:15 pm UTC (link)
	Whoops I thought I had said what I wanted to do haha, sorry about that. I want the background to fill the whole screen if its at all possible :) (Reply to this) (Parent) (Thread)

	aidencav 2013-06-06 07:17 pm UTC (link)
	As far as I know, the only way to do that is to figure out the dimensions of the browser and then edit the image in a photoshop program to fit those dimensions. I don't think there's a way to do it within the layout. I could be wrong, though! I'm still very much an amateur at coding :) (Reply to this) (Parent) (Thread)

	50sglamorgirl 2013-06-06 07:23 pm UTC (link)
	I'll try and do it that way :) thank you! Well you could also be right hopefully :) (Reply to this) (Parent) (Thread)

	aidencav 2013-06-06 07:26 pm UTC (link)
	What I usually do is fade out the sides of the image, save it as a png and then set the background color so that the image blends into it (so for yours, I would set it to a purple), but with the images in your background, I'm not sure that would work. Good luck, though! (Reply to this) (Parent) (Thread)

	50sglamorgirl 2013-06-06 07:33 pm UTC (link)
	I agree there :) I just have to make things difficult haha. Thank you! Good luck to you too with coding :) (Reply to this) (Parent)

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)