The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make an extending Banner into a repeating background

View previous topic View next topic Go down

Solved How to make an extending Banner into a repeating background

Post by Zed is Not Dead on September 12th 2015, 6:26 am

So I really hate using this site as an example but it has coding styles I really like and would like to use on my site.

here is a gif to get a better understanding.



Explanation: So As you see, when I start before scrolling it looks like a banner however when you scroll down it extends and now seems like a background, however when scrolling more there is a repeating background behind the image. I would like the coding to do this please. I believe I understand how it works, there is a transparent banner and the image is entirely two backgrounds one that acts like a banner and has bottom part of it transparent and blends in with the actual repeating background. I would like the code to do this though please. Also if you need to check it out some more here is the link to the site, http://www.strongworldrol.com/

I would like to know how the footer and the forum wrapper as well as the census was done but I guess I need another thread for those I really would like to stop bothering you guys about making codes like the ones from this site but this site is the best example of what I have been looking for, for the longest time.

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to make an extending Banner into a repeating background

Post by SLGray on September 12th 2015, 6:42 am

It looks like a banner plus an image for the background.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36663
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: How to make an extending Banner into a repeating background

Post by Zed is Not Dead on September 12th 2015, 6:42 am

Yes but if you look at the site the actual banner drags down a bit and eventually fades off into a banner

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to make an extending Banner into a repeating background

Post by SLGray on September 12th 2015, 6:49 am

CSS Stylesheet:
Code:
body {
  background: url("IMAGE URL") no-repeat scroll center top, YOUR COLOR url("IMAGE URL") no-repeat fixed center center;
)
Image URL = add your images
Your Color = add your color


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36663
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: How to make an extending Banner into a repeating background

Post by Zed is Not Dead on September 12th 2015, 7:18 am

So I ran the code on a mock site I made before posting it on the actual site, thank god I did, it's getting there , there is only one issue. . .the banner or main image rather refuses to fill the bottom gap, any ideas?

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to make an extending Banner into a repeating background

Post by Ange Tuteur on September 12th 2015, 11:54 am

Hey,

If you don't want the background to repeat, try adding background-size:cover; to the rule, so you get :
Code:
body {
    background: url("IMAGE URL") no-repeat scroll center top, YOUR COLOR url("IMAGE URL") no-repeat fixed center center;
  background-size:cover;
)

Otherwise, just replace no-repeat by repeat so the image repeats to fill the empty spaces.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to make an extending Banner into a repeating background

Post by Zed is Not Dead on September 14th 2015, 6:48 pm

SOLVED!

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to make an extending Banner into a repeating background

Post by SLGray on September 15th 2015, 2:00 am

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36663
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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