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.
avatar
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.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.

avatar
SLGray
Administrator
Administrator

Male Posts : 38716
Reputation : 2600
Language : English
Location : United States

http://classifiedads.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
avatar
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.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.

avatar
SLGray
Administrator
Administrator

Male Posts : 38716
Reputation : 2600
Language : English
Location : United States

http://classifiedads.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?
avatar
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13148
Reputation : 2836
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!
avatar
Zed is Not Dead
Forumember

Posts : 257
Reputation : 27
Language : English

http://naruto-ld.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.

avatar
SLGray
Administrator
Administrator

Male Posts : 38716
Reputation : 2600
Language : English
Location : United States

http://classifiedads.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