Comic Fury Webcomic Hosting - A few more questions please.

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > A few more questions please.
Pages: [1]

"A few more questions please.", 5th May 2012, 1:10 PM #1
snorgar

User avatar
Posts: 24
Referrals: 0
Registration date: 28th Oct 2011
My site is coming along and while it might not be the best coded it works. I have 2 questions. one is making my background stretch corner to corner instead of tiled. The code I am using is a bit different than the norm here it seems.

site can be viewed here: web page

body

{
background:black url(http://MyAngelMyDemon.thecomicseries.com/files/heaven_background.jpg) fixed; 	
	color:#F8F8F8;
	font-family:georgia,sans-serif;
	font-size:9pt;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:13pt;
	margin:0;
	padding:0;
	align: left;
	img:#150600 url(images/greyBG.jpg) repeat-x;
}


can't seem to add width and height to 100% with this.

Second is my chat boxes I would like the avatars to be on the left and the text right but that is a more minor issues as it works still as is. Here is the snip-its of code I took for the comments section and what I added to them.

#avi
{
	background:#000000;
	width:125px;
	height:125px;
	border: 6px  double #003366;
	align:left;
}
.authorcomments
{
	background: #000000;
        color: #000000;
	border: 1px solid #453310;
	padding: 3px;
	margin-right: 1em;
	text-align: center;
	min-height: 130px;
}
.comments, #authornotes 
    {
     padding:5px;
    }
.comment, .permalinkcode 
{
    padding:10px;
    border: 6px  double #003366;
    background-color:#99ccff;
    color: #000000;
}
.toright 
{
    margin-left:7px;
    margin-right:7px;
}



and finally the whole code just in case it is needed.

5th May 2012, 3:13 PM #2
Doomy♀

User avatar
Posts: 981
Referrals: 0
Registration date: 10th May 2011
Location: Purgatory
Hmm the only way I know is to make the image itself larger by resizing it.

Usually with gradients you can use the xy to stretch gradients or simple backgrounds.

But with an actual picture I think you have to physically resize it.
Or look for a new one entirely. But if there is a way I would like to learn about this too. xD;;;


_______________________
imageimage
DEMENTED (updates Sat) and Road To Hell (Updates Wed)
Genre: LGBT - Supernatural/Sci-Fi/Horror/Humor/Gore/and More~

5th May 2012, 4:20 PM #3
Dodom♀

User avatar
Posts: 421
Referrals: 0
Registration date: 6th Sep 2009
Location: Québec
I think you should resize the image itself, as Doomy said. The colour gradient in it is soft so it shouldn't pixellate visibly.

You can ALSO use the properties:

background-size:100% 100%;
background-repeat:no-repeat;

But only use them along with the enlarged image, because background-size is not broadly supported enough to rely on it alone.



And if I may, I don't think that background agrees with the rest of the layout, especially the header. You may want to make sure you're happy with that colour scheme at some point.
_______________________
image
Forum > Layouts, HTML, CSS & Javascript > A few more questions please.
Pages: [1]