How do I create rotating animation for background image within container without rotating entire container

0 votes

I am very new to HTML and CSS and have been stuck on this problem for a while. Ideally I'm looking for a solution that is CSS only, but I can try a JavaScript solution if I need to. My code is probably very badly written so please forgive me.

I am trying to create a rotating banner animation effect for my personal website. I have a container that has a background image of a colour wheel, and I have some divs within this container that hold my logo and a subtitle.

Banner

The colour wheel image is just a large circle. I am looking to rotate this image without it rotating the whole container.

enter image description here

I have tried everything from this post but this just rotates the image once where as I would like to rotate the image continuously: How to rotate the background image in the container?

I have also tried this, which has the animation aspect but also rotates the whole container: https://www.sitepoint.com/community/t/rotate-background-image-constantly/251925/3

Here is my code:

HTML:

  <section id="banner">
      <div class= "banner-container">
        <div class="row">
          <div class="col text-center">
              <img src="images/BenMillerType.png" class="logo"/>
          </div>
        </div>
        <div class="row justify-content-center align-items-center">
          <div class="col-md-10">
            <p class="promo-title text-center"></p>
            <p class="promo-subtitle text-center">
              Graphic Design | 3D Design | UI/UX Design
            </p>
          </div>
        </div>
      </div>
    <div id="work"></div>
  </section>

CSS:

#banner {
  margin-bottom: 100px;
  background-color: #FFFDC4 ;
  border-bottom: 1px solid black;
}

.banner-container{
  overflow: hidden;
  width: 100%;
  height: 95%;
  margin: 0px;
  background-image: url(/images/ColourWheel.png);
  background-position: center;
  margin:0 !important;
}

.promo-subtitle {
  font-size: 20px;
  background-color: rgb(42, 156, 157) !important;
  color: #fff;
  border-radius: 30px;
  border: 1px solid black;
  padding: 10px 20px;
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.logo {
  margin-top: 250px;
  object-fit:contain;
  width: 500px;
  height: auto;
  z-index: 2 !;
}

Apr 28, 2023 in UI UX Design by Ashwini
• 5,430 points
2,363 views

1 answer to this question.

0 votes

To create a rotating animation for the background image within the container without rotating the entire container, you can use a pseudo-element to apply the background image and then apply the animation to it. Here's an example:

HTML:

<section id="banner">
  <div class="banner-container">
    <div class="row">
      <div class="col text-center">
        <img src="images/BenMillerType.png" class="logo"/>
      </div>
    </div>
    <div class="row justify-content-center align-items-center">
      <div class="col-md-10">
        <p class="promo-title text-center"></p>
        <p class="promo-subtitle text-center">
          Graphic Design | 3D Design | UI/UX Design
        </p>
      </div>
    </div>
  </div>
  <div id="work"></div>
</section>

CSS:

#banner {
  margin-bottom: 100px;
  background-color: #FFFDC4;
  border-bottom: 1px solid black;
}

.banner-container {
  overflow: hidden;
  width: 100%;
  height: 95%;
  margin: 0;
  position: relative;
}

.banner-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/images/ColourWheel.png);
  background-position: center;
  background-size: contain;
  animation: rotate-bg 10s linear infinite;
  z-index: -1;
}

.promo-subtitle {
  font-size: 20px;
  background-color: rgb(42, 156, 157);
  color: #fff;
  border-radius: 30px;
  border: 1px solid black;
  padding: 10px 20px;
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.logo {
  margin-top: 250px;
  object-fit: contain;
  width: 500px;
  height: auto;
  z-index: 2;
}

@keyframes rotate-bg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

In this example, we use the ::before pseudo-element to create a new element that is positioned behind the other elements inside the container. We set the background-image property to the image we want to use as the background, and we set the animation property to the rotate-bg animation we will define next. We also set z-index to -1 to ensure that this element is positioned behind the other elements inside the container.

We then define the rotate-bg animation using the @keyframes rule. In this case, we want the background image to rotate continuously, so we set the transform property to rotate(360deg) at 100% of the animation.

Finally, we position the other elements inside the container using absolute positioning, as in your original code.

This should give you a rotating animation for the background image without rotating the entire container.

answered Apr 28, 2023 by pooja

Related Questions In UI UX Design

0 votes
1 answer

How to achieve this UI/UX design for an iOS UIButton object

From the image provided, it appears that ...READ MORE

answered Apr 25, 2023 in UI UX Design by seena
444 views
0 votes
1 answer

How to create Custom UITabBarController in Swift with round button in the center?

Your implementation is almost correct, you just ...READ MORE

answered Apr 27, 2023 in UI UX Design by vishalini
1,445 views
0 votes
1 answer

UI/UX design or audit - how to measure the costs?

When it comes to charging for a ...READ MORE

answered Apr 25, 2023 in UI UX Design by Tej
301 views
0 votes
1 answer
0 votes
1 answer
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17, 2020 in Web Development by anonymous
• 37,510 points
746 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 798 views
+1 vote
1 answer

What are pseudo class in css??

Hey, The state of an element is controlled  by ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,880 points

edited Jan 21, 2020 by Niroj 679 views
0 votes
1 answer
0 votes
1 answer

How do I make it where when I change my window size, the content adjusts with it?

To make the content adjust with the ...READ MORE

answered Apr 26, 2023 in UI UX Design by Tanishqa
• 1,170 points
333 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP