The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Fixed background issues

2 posters

Go down

In progress Fixed background issues

Post by Kamui February 22nd 2016, 6:51 pm

Code:
body {
    background-image: url("Image link");
    background-repeat: no-repeat;
}


FORUM LINK: http://narutogaiden.forumotion.com/

So this is the code I have, but the problem is the background isn't covering the entire form like I want it to, instead it's sitting in the upper-corner of the forum.
Kamui
Kamui
Forumember

Male Posts : 291
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

In progress Re: Fixed background issues

Post by Ange Tuteur February 22nd 2016, 7:03 pm

Hey,

If you want the background image to fill the entire background you can use the
Code:
background-size
property. Like this :
Code:
body {
  background-size:cover;
  background-attachment:fixed;
}
You can remove
Code:
background-attachment:fixed;
if you want. That only fixes the background so it stays the same as you scroll.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Fixed background issues

Post by Kamui February 22nd 2016, 7:28 pm

Why's the background so huge now? It's like the longer the page its self is, the background constantly readjusts its self.
Kamui
Kamui
Forumember

Male Posts : 291
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

In progress Re: Fixed background issues

Post by Ange Tuteur February 23rd 2016, 3:54 pm

That's the effect of "cover" you can try different values such as 100% :
Code:
body {
  background-size:100% 100%;
  background-attachment:fixed;
}

See this for more information :
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Fixed background issues

Post by Kamui February 23rd 2016, 9:54 pm

I thought these codes would be of use but their no good either. Whenever I upload the background to pics, it spans out correctly, which looks more nice. The codes just mess up the background. I tried to remove the options for image url and just leave the no repeat. Could it be my image just isn't large enough?

Code:
div {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:initial;
}


Code:
div {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:contain;
}


Code:
div {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:auto;
}


Kamui
Kamui
Forumember

Male Posts : 291
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum