background image marquee

Hello,

I have a #brading element which i added a background image. How can i make it scroll to the left with CSS code? Is it possible? Because if i add a marquee in the template it just makes the #brading element up and alone and it marquees it and puts the rest below it. I want the background image to scroll to the left somehow using CSS. Is it possible?

Bump!

Hi, try this:

go to overall_header template, and replace the following:

Code:

<a href="/forum" title="Go to community index" rel="home" accesskey="1"><img src="http://i1179.photobucket.com/albums/x392/PiklakiNye/logo2_zps039b56f6.png" alt="Logo"></a>

with:

Code:

<a href="/forum" title="Go to community index" rel="home" accesskey="1"><marquee behavior="alternate" direction="left"><img src="http://i1179.photobucket.com/albums/x392/PiklakiNye/logo2_zps039b56f6.png" width="455" height="61" /></marquee></a>

J0k3R^ wrote:Hi, try this:

go to overall_header template, and replace the following:

Code:

<a href="/forum" title="Go to community index" rel="home" accesskey="1"><img src="http://i1179.photobucket.com/albums/x392/PiklakiNye/logo2_zps039b56f6.png" alt="Logo"></a>

with:

Code:

<a href="/forum" title="Go to community index" rel="home" accesskey="1"><marquee behavior="alternate" direction="left"><img src="http://i1179.photobucket.com/albums/x392/PiklakiNye/logo2_zps039b56f6.png" width="455" height="61" /></marquee></a>

That will detach the image and make it with marquee. What i want is the image to stay where it is and marquee left and leave the rest where they are.

I want that image to continue going to the left but i want the rest to stay there.

Hello MrMind,

Try adding this to your stylesheet :

Code:

.brading {
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position:0% 0%;
  -webkit-animation:goright 17500ms linear infinite;
          animation:goright 17500ms linear infinite;
}

@-webkit-keyframes goright {
  from { background-position:0% }
  to { background-position:500% }
}
@keyframes goright {
  from { background-position:0% }
  to { background-position:500% }
}

No this doesn't work!

Remove this :

Code:

.brading {
    margin-top: -16px;
    border-bottom: 2px solid #000;
    background: url("http://i39.servimg.com/u/f39/18/45/97/69/bg511.png") no-repeat scroll 0% 0% / 100% 100% transparent;
    min-height: 64px;
}

Replace with :

Code:

.brading {
  margin-top:-16px;
  border-bottom:2px solid #000;
  min-height:64px;
  background-image:url(http://i39.servimg.com/u/f39/18/45/97/69/bg511.png);
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position:0% 0%;
  -webkit-animation:goleft 17500ms linear infinite;
          animation:goleft 17500ms linear infinite;
}

@-webkit-keyframes goleft {
  from { background-position:0% }
  to { background-position:-500% }
}
@keyframes goleft {
  from { background-position:0% }
  to { background-position:-500% }
}

Wait, shouldn't the command be #branding?

If it's a class, then yes, # is used. If it is an ID, . is used.

Yes, but the command id is: #branding and not .brading

When I inspect your forum it says it's a classname, so, I would use a period. If it was an Id, I would have used a hash.

strange to me it says id look:


Edit: Yes you are in the Intro page. Go to the /forum and check the element!

bump

Okay, remove the codes I gave before, and replace this :

Code:

#branding {
    background: url("http://i39.servimg.com/u/f39/18/45/97/69/bg511.png") no-repeat scroll 0% 0% / 100% 100% transparent;
    border-bottom: 1px solid #1B3759;
    min-height: 64px;
}

by this :

Code:

#branding {
  margin-top:-16px;
  border-bottom:2px solid #000;
  min-height:64px;
  background-image:url(http://i39.servimg.com/u/f39/18/45/97/69/bg511.png);
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position:0% 0%;
  border-bottom:1px solid #1B3759;
  -webkit-animation:goleft 17500ms linear infinite;
          animation:goleft 17500ms linear infinite;
}

@-webkit-keyframes goleft {
  from { background-position:0% }
  to { background-position:-500% }
}
@keyframes goleft {
  from { background-position:0% }
  to { background-position:-500% }
}

Well unfortunately this is the result:

Did it move, or what was the problem ?

Yeah this is solved! Thanks! I solved it! Needed some changes and it was ok!