Rotate background image without rotating background-color

Greetings,

I have a section that have both background color and image, what I’d like to do is rotate the background image (90deg) without rotating the section itself.

here is the HTML:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="description" content="Desgin + research">
<meta name="keywords" content="architecture, website, design, web development">
<meta name="author" content="Abdulrahman Mushref">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!---------- Title + icon ---------->
<title>Welcome to urbanphenomena</title>
<link rel="shortcut icon" href="favicon.ico"/>
<!---------- BootStrap & CSS ---------->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
</head>
<!---------- Start of body ---------->
<body>
<div class="navbar-fixed-top">
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;;">1</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">2</div>
  <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">3</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">4</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">5</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">6</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">7</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">8</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">9</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">10</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavenderblush;">11</div>
 <div class="col-lg-1 col-xs-1 col-sm-1 col-md-1" style="background-color:lavender;">12</div>
 </div>  
<!---------- Start of Nav ---------->
<div class="container-fluid">
   <div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
      <!-------- Nav header/toggle button -------->
      <div class="navbar-header">
         <span class="sr-only">Toggle Navgiation</span>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#demo">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
      </div>
      <!-------- Navigation Menu -------->
      <div class="navbar-collapse collapse" id="demo">
        <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#project">Projects</a></li>
            <li><a href="#location">Location</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
   </div>
</div>
    <!-------- Home Section -------->
<div class="jumbotron">
  <div class="container-fluid section-home" id="home">
  <div class="row">
  <div>
  <!---------- Title ---------->
   <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-xs-push-1">
   
       <h1><b><span class="title">urbanphenomena</span></b></h1>
     <h1 style="margin-top: -20px;"><span class="title">design+research</span></h1>
   </div>
  </div>
  </div>
  </div>
</div>
<!-------- About Section -------->
<section class="container-fluid section-about" id="about">

<!-------- About Text -------->
  <div class="row">
   <b class="col-lg-12
             col-md-12
             col-sm-12
             col-lg-push-1
             col-md-push-1 
             col-sm-push-1
             col-xs-push-1
             b">About</b>
    <div class="col-lg-5
                col-md-5
                col-sm-5
                col-xs-11
                col-lg-push-1
                col-md-push-1
                col-sm-push-1
                col-xs-push-1">
    <p>urbanphenomena: design+research, is a multi-disciplinary design consultancy studio based in Jeddah, with satellite offices in Madinah and Riyadh. From its inception, the studio has focused on bringing aspects of our local culture to a wider audience via the platform of design and research. Through our design work we provide clients and partners with architectural, interior design, wayfinding and graphic design services; using a combination of concepts, drawings, models and local market know-how. The type of projects vary, but the common denominator has always been “identity”; evolving a local identity for the project with contemporary functions and use. Weaving this approach for a wide variety of finished projects, ranging from commercial office spaces, exhibition stands to schools and cultural buildings.</p>
    </div>
    <div class="col-lg-5
                col-md-5
                col-sm-5
                col-xs-11
                col-lg-push-1
                col-md-push-1
                col-sm-push-1
                col-xs-push-1"><span>
    <p>To compliment or design activity, we continuously conduct a variety of research work and consultancy, providing advisory services on the built environment and its interaction with the urban context and culture. This research is then used for projects as presentations, in the form of reports with our design projects, or submitted to publications for print (books or professional journals) and as online articles. As part of the think tank activities of “urbanphenomena”, we have been active in research and publishing on the current condition of architecture practice and design in the region. Our research covers topics such as urbanism in the Middle East, Islamic architecture of Central Asia, Japanese Architecture and urbanism, information architecture, way-finding in the built environment, and mapping the cultural identity of cities.</p>
    </span>
    </div>
  </div>
</section>


<!-------- Projects Section -------->
<section class="container-fluid section-project" id="project">
    <div class="row">
       <div class="col-lg-12">
        <b class="col-lg-1 
                  col-md-1
                  col-sm-1
                  col-xs-1
                  col-lg-push-1
                  col-md-push-1
                  col-sm-push-1
                  col-xs-push-1 b">Projects</b>
        <!-------- SlideShow -------->
        

       </div>
   </div>
</section>

<!-------- Location Section -------->
<section class="section-location" id="location">
   <!-------- MAP -------->
    <div id="map"></div>
</section>


<!-------- Contact Section -------->
<section class="container-fluid contact-section" id="contact">
    <div class="row">
        <div class="col-lg-12 col-lg-push-1 col-md-12 col-sm-12 col-xs-11">
            <div class="row">
                <b class="b col-lg-12">Contact Us</b>
            </div>
            
        <!-------- Contact INFO -------->
    <div class="row">
        <div class="col-lg-7 col-md-7 col-sm-8 col-xs-7">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
    <h3>Address</h3>
    <span>4140 Al Kayyal, Ar Rawdah<br>Jeddah 23434-8287<br>Saudi Arabia</span>
        </div>
        
        <div class="col-lg-2 col-md-4 col-sm-3 col-xs-5">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
          <h3>Hours</h3>
          <span><strong>Sunday - Thrusday</strong> 8am - 6pm<br><strong>Friday - Saturday</strong> Weekend<br></span>
        </div>  
    </div>    
    <div class="row">
        <div class="col-lg-7 col-md-7 col-sm-8 col-xs-7">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <h3>E-mail</h3>
            <span><a href="mailto:info@urbanphenomena.net">info@urbanphenomena.net</a></span>
        </div>
        <div class="col-lg-2 col-md-5 col-sm-3 col-xs-5">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
          <h3>Phone</h3>
          <span>+966 12 660 4229</span>
        </div>  
    </div>
</section>
<!-------- Footer -------->
    <footer class="container-fluid footer" id="footer">
        <div class="row">
            <div class="col-lg-12 col-lg-push-5 
                        col-md-12 col-md-push-5
                        col-sm-12 col-sm-push-4
                        col-xs-12 col-xs-push-3">
                <span>&copy;2016 urbanphenomena, Jeddah</span>
            </div>
        </div>
    </footer>
<!---------- JQuery & Other scripts ---------->
<script src="map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBD0ZZoFqm2UobxsJB1cyuF6vnti2qSbsA&callback=initMap" async defer></script>
<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

and here is the CSS (“#about” contains the background color and image):

html, body {
	height: 100%;
    width: 100%;
    overflow-x: hidden;
    padding-bottom: 20px;
}

.jumbotron {
    background:url('../imgs/wesal.jpg') no-repeat center center;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/**********************************************

HOMEPAGE + TITLE

***********************************************/

.title {
    text-shadow: 0px 0px 10px #696969;
    color: #f6f6f6; 
    font-size: 70px;
}

.title2 {
    text-shadow: 0px 5px 15px #3f3f3f;
    opacity: 0.2;
}

ul {
    color: white;
    font-size: 17px;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar-toggle {
  width: 100%;
    opacity: 0.2;
}

.icon-bar {
    margin-left: 50%;
}

.navbar-nav > li > a {
    padding-top:10px !important;
    padding-bottom:5px !important;
}

.navbar {
    min-height:32px !important;
    opacity: 0.9;
}

p {
    font-size: 16px;
}

.b {
    font-size: 30px;
}

/**********************************************

SECTIONS

***********************************************/

#home     {width:100%;height:50%;}
#about    {padding-top:50px;margin-top:-40px;height:500px;color: #7e7e7e; background: #3f3f3f url('../imgs/pattern.png') left no-repeat;}
#project  {padding-top:50px;height:95%;color: #7e7e7e; background-color: white;}
#location {padding-top:50px;height:85%;}
#map {width:100%;height:100%;}
#contact  {padding-top:50px;height:500px;color: #7e7e7e; background-color: #2b2b2b;}

/**********************************************

FOOTER

***********************************************/

#footer {
    background-color: darkgray;
    color: #7e7e7e;
    padding: 10px;
}

Not touching it. The local stylesheet must come after other stylesheets.

Which container has the background color? and which container has the background image? (I assume they are the same at this time.)

Please add full URLs to bootstrap, jQuery, CSS and image resources.

You have two versions of jQuery running? Does that work? One is normally the limit otherwise there are conflicts.

This section seems to be missing those last two close </div>s that I have added. Please validate your code.

<!-------- Contact Section -------->
<section class="container-fluid contact-section" id="contact">
    <div class="row">
        <div class="col-lg-12 col-lg-push-1 col-md-12 col-sm-12 col-xs-11">
            <div class="row">
                <b class="b col-lg-12">Contact Us</b>
            </div>
        </div>  <!-- ADDED, was missing -->
    </div>  <!-- ADDED, was missing -->

<p> within <span>s is invalid.

                col-xs-push-1"><span>
    <p>To compliment or design activity, we continuously conduct a variety of research work and consultancy, providing advisory services on the built environment and its interaction with the urban context and culture. This research is then used for projects as presentations, in the form of reports with our design projects, or submitted to publications for print (books or professional journals) and as online articles. As part of the think tank activities of “urbanphenomena”, we have been active in research and publishing on the current condition of architecture practice and design in the region. Our research covers topics such as urbanism in the Middle East, Islamic architecture of Central Asia, Japanese Architecture and urbanism, information architecture, way-finding in the built environment, and mapping the cultural identity of cities.</p>
    </span>

Your question is probably easy to answer… after I finish building a working copy of the page.

2 Likes

the “About” section has the background-color and image, which is “#about” in the CSS!

Yes, 2 JQuery versions are working, the older version is for the “navbar toggle/Dropdown” because it isn’t working on the newer version of JQuery. Also I removed the newer one!

Please add full URLs to bootstrap, jQuery, CSS and image resources.

I don’t understand what you mean?

p within spans is invalid.

Fixed it!!

Thank you for the help

These are relative paths to the resources that live on your server.

background:url('../imgs/wesal.jpg') 

<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

We cannot access the contents of those relative paths. We need the full URL (these are examples only),

 http://my.website.com/thisproject/css/style.css
 http://my.website.com/thisproject/css/responsive.css
 http://my.website.com/thisproject/bootstrap/css/bootstrap.min.css
1 Like

Aha I see,

But these files are local…I can’t add URLs, since I didn’t upload them to the domain yet.

But I can post them here.

Style.css:

html, body {
	height: 100%;
    width: 100%;
    overflow-x: hidden;
    padding-bottom: 20px;
}

.jumbotron {
    background:url('../imgs/wesal.jpg') no-repeat center center;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/**********************************************

HOMEPAGE + TITLE

***********************************************/

.title {
    text-shadow: 0px 0px 10px #696969;
    color: #f6f6f6; 
    font-size: 70px;
}

.title2 {
    text-shadow: 0px 5px 15px #3f3f3f;
    opacity: 0.2;
}

ul {
    color: white;
    font-size: 17px;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar-toggle {
  width: 100%;
    opacity: 0.2;
}

.icon-bar {
    margin-left: 50%;
}

.navbar-nav > li > a {
    padding-top:10px !important;
    padding-bottom:5px !important;
}

.navbar {
    min-height:32px !important;
    opacity: 0.9;
}

p {
    font-size: 16px;
}

.b {
    font-size: 30px;
}

/**********************************************

SECTIONS

***********************************************/

#home     {width:100%;height:50%;}
#about    {padding-top:50px;margin-top:-40px;height:500px;color: #7e7e7e; background: #3f3f3f url('../imgs/pattern.png') left no-repeat;}
#project  {padding-top:50px;height:95%;color: #7e7e7e; background-color: white;}
#location {padding-top:50px;height:85%;}
#map {width:100%;height:100%;}
#contact  {padding-top:50px;height:500px;color: #7e7e7e; background-color: #2b2b2b;}

/**********************************************

FOOTER

***********************************************/

#footer {
    background-color: darkgray;
    color: #7e7e7e;
    padding: 10px;
}

responsive.css:

/* ----------- iPhone ----------- */

@media(max-width: 1200px) {
}

@media(max-width: 918px) {
    #about {height: 65%;}
    .title {font-size: 60px; width: 70%; color:#f6f6f6;}
    .jumbotron {width: 100%; height: 85%;}
}

@media(max-width: 804px) {
    #about {height: 70%;}
    .title {font-size: 55px; width: 70%; color:#f6f6f6;}
    .jumbotron {width: 100%; height: 80%;}
}

@media(max-width: 701px) {
    #about {height: 75%;}
    .title {font-size: 50px; color:#f6f6f6;}
    .jumbotron {width: 100%; height: 75%;}
}

@media(max-width: 594px) {
   #about {height: 85%;}
    .title {font-size: 45px; width: 70%; color:#f6f6f6;}
    .jumbotron {width: 100%; height: 70%;}
}

@media(max-width: 515px) {
   #about {height: 95%;}
    .title {font-size: 40px; width: 70%; color:#f6f6f6;}
    .jumbotron {width: 100%; height: 65%;}
}
/* ----------- Galaxy ----------- */
@media(max-width: 461px) {
    #about {height: 110%;}
    .title {font-size: 35px; width: 70%; color:#f6f6f6;}
    .jumbotron {width: 100%; height: 60%;}
}


@media(max-width: 400px) {
    #about {height: 130%;}
    .title {font-size: 30px; width: 70%; color:#f6f6f6;}
    .jumbotron {width: 100%; height: 55%;}
}

@media(max-width: 350px) {
    #about {height: 150%;}
    .title {font-size: 25px; width: 70%; color:#f6f6f6;}
    .jumbotron {width: 100%; height: 50%;}
}

@media(max-width: 320px) {
    #about {height: 155%;}
    .title {font-size: 25px; width: 70%; color:#f6f6f6;}
    .jumbotron {width: 100%; height: 50%;}
}

Bootstrap is a big CSS file, can’t add it here. (getbootstrap.com) Version 3

Hope this help…

Which version of bootstrap are you using?

Can you upload the relevant images? The one you want rotated, for example. For foreground images, an alternative is to use a placeholder service such as http://placehold.it/600x300 and the img attributes should include the dimensions of the images. For background images, a comment giving the size of the image can be helpful. Depends.

The short answer to your question is most likely that the image to be rotated will be assigned to a separate container within the parent container with the background color, possibly a pseudo-element, so the container with the background image can be rotated. Don’t know without seeing a “working page”, though.

1 Like

Bootstrap version is:
3.3.7

the image in wanna rotate is this:
(http://imgur.com/a/5jRU2)

I tried to upload the files to the domain and link the files but it is impossible…

Edit:
both background color and image are in the same container/section which is the “About”.

The image that I found is an expanding geometric line pattern made of kites, dark lines on a transparent background, is that correct?

1 Like

Correct!

When you say “rotate the image”… it seems to me that it would be easier to rotate it graphically… unless you mean that you want it to animate, to rotate continuously with CSS or JS. What do you really mean by rotate?

1 Like

Hi there Sora_Keyheart,

here is an example, using the image that you provided…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Geometric shape</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background: #f0f0f0;
 }
#geometric-shape {
    position: relative;
    overflow: hidden;
    width: 40vw;
    height: 30vw;
    margin: auto;
    border: 1px solid #000;
    background: linear-gradient(to bottom,#fff,#bbb);
    box-shadow: 0.4em 0.4em 0.4em #999;
 }
#geometric-shape::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-image: url(http://i.imgur.com/dTHLJ8B.png);
    background-size: 100% auto;
    animation: rotate 2s 1s ease forwards;
 }
@keyframes rotate {
0% {
    transform: rotate(0deg) translate(0,0);
  }
100% {
    transform: rotate(90deg) translate(12.5%,12.5%);
  }
 }
@media screen and (max-width:50em) {
#geometric-shape {
    width: 60vw;
    height: 45vw;
  }
 }
@media screen and (max-width:30em) {
#geometric-shape {
    width: 80vw;
    height: 60vw;
  }
 }
@media screen and (max-width:20em) {
#geometric-shape {
    width: 92vw;
    height: 69vw;
  }
 }
</style>

</head>
<body> 

<div id="geometric-shape"></div>


</body>
</html>

coothead

3 Likes

Greetings,

see that big kite? I want to rotate that big kite to be on the right of the section.

@coothead
your example is great, I don’t want an animation but it helped me ear ideas!

I am still not sure what you wish to achieve because that row of text can be very wide or very narrow depending on the viewport.

I flipped the image left to right. The positions of the kites are swapped left-to-right, not rotated. It could have been rotated 180 degrees just as easily. This image has a transparent background and can be downloaded. Are we getting closer?

YES!

I just want that BIG kite shape to be vertical on the way right side of the section, like this:

Imgur

I don’t understand about “on the way to the right size”. You told coothead that you did not want animation, but you keep describing movement.

Try changing @coothead’s code in one place and run it again.

Change #keyframes rotate to this:

@keyframes rotate {
  0% {
    transform: rotate(0deg) translate(0,0);
  }
  100% {
    transform: rotate(180deg) translate(0,0);
  }
}

You can change the speed of the movement just above that code.
Change the last line in #geometric-shape::before to something like this:

#geometric-shape::before {
    animation:rotate 6s 1s linear forwards;
}

If this does not show what you want, the you can try to create an image that shows the steps of the journey from the left to the right. You should be able to overlay several shots on one to demonstrate what you want.

1 Like

on the way to the right size

I meant: All the way to the right side of the section

and thank you, I shall try that!

OK, you want the big kite to be vertical.

Can you make a picture over your web page that shows what you want this to look like? The kites is a fairly tall, slightly narrow image. That text area in your web page can become very wide and short (not tall), or very narrow and tall. I can’t picture what you are asking for. It now sounds like you want the image to rotate 180 degrees and move all the way from the left edge to the right edge. @coothead ???

1 Like

It now sounds like you want the image to rotate 180 degrees and move all the way from the left edge to the right edge.

CORRECT!

the functions of the smaller kites are for responsive screens, the smaller the screen is, the rotation of the kites change to the smaller kite!

That’s not how it usually works. For smaller screens, the image size is scaled down to fit the screen. Or you can serve up a different image.

1 Like

Aha! Understood.